如何抓住瞬間輸入框失去焦點？
[英]how to catch moment input box lost focus?
問題描述
當輸入框失去焦點時，我正在使用這樣的事件監聽器結構來做一些事情。 但它不會起作用。 我應該聽什么事情來獲取瞬間輸入框丟失其中的光標（用戶點擊它之外）？
document.getElementById('div inside which input is located').addEventListener( 'blur', function(e){ if(event.target.className=='editInput'){doStuff(event.target);} } , false );
4 個解決方案
解決方案1
12 已采納 2012-12-02 10:52:25
正確的事件是onBlur。 看看這段代碼：
<!DOCTYPE html>
<html>
<head>
<title>element</title>
<script type="text/javascript">
function message() {
var text = document.getElementById("test").value;
alert(text);
}
</script>
</head>
<body>
<input type="text" name="test" id="test">
<script type="text/javascript">
document.getElementById("test").onblur=message;
</script>
</body>
</html>
當它失去焦點時，它可以工作並打印輸入內容。 也許你的錯誤是你把事件附加到div而不是輸入？
解決方案2
5 2012-12-02 10:44:19
var input = document.getElementsByTagName('input')[0];
input.onfocus = function() {
this.className = 'highlight';
}
input.onblur = function() {
this.className = '';
}
解決方案3
3 2012-12-02 11:39:00
使用vanilla Javascript為blur事件設置處理程序：
你可以使用像這樣的代碼在vanilla jQuery中為特定元素“test”設置blur事件的處理程序
document.getElementById("test").onblur= yourEventHandler
您可以在問題中使用事件處理程序而無需任何修改。 就是那個部分。 但是，我相信這里還有更多要說的。
大局：
在跨瀏覽器的兼容性方面，文本輸入上的模糊/焦點事件是最難處理的事件之一。 但是如果您要進行任何認真的開發，我建議使用jQuery，YUI，Dojo，MooTools等框架。這些都可以幫助您編寫更好的代碼，並保護您免受兼容性問題的影響。
遺憾的是，Web開發人員必須面對的現實是許多瀏覽器具有相似但不相同的行為。 在我們測試剛剛編寫的代碼片段時，找到一個恰好在我們碰巧使用的瀏覽器上運行的解決方案是不夠的。 我們需要確保我們的代碼在我們的應用程序所針對的所有瀏覽器中正常運行。 那么如果您突然發現分配模糊的方式甚至在某些特定元素的某些瀏覽器上不起作用，但又會發生另一種情況，會發生什么？ 你是否在你的代碼中到處都放了，如果在那里？ 如果你走這條路，你確定你沒有錯過任何東西嗎？ 然后，如果您發現另一個瀏覽器的另一個問題，您是否添加了另一個問題，依此類推等等？ 也許您決定定義一個函數setBlurEventHandler來執行它在框中所說的內容並在代碼中的任何地方使用它而不是上面的語句。 你這樣做只是為了模糊事件還是幾乎所有你做的事情？ 為其他事情做這件事也是有意義的。 大。 您現在擁有一個用於編寫跨瀏覽器兼容的代碼的框架。 如果我們所有人都將自己的框架保留給自己，我們將花費大量時間重新發現並解決相同的問題。 輸入開源Javascript框架。 您可以利用其他人花費的時間來利用它們，但您也可以通過報告錯誤，編寫代碼和文檔來做出貢獻。 這不是更有意義嗎？ （或者，如果在將來的某個時候你確信你有一個基於一些非常聰明的想法的框架，無論多么不完整，一定要把它放在那里，看看你能為社區提供什么以及社區可以做些什么你...）
為了更好地推動這一點，讓我向您展示一些來自jQuery源代碼的評論。 正如我之前所說，文本輸入上的模糊/焦點事件是跨瀏覽器兼容性方面最不麻煩的事件之一。 但是，當您處理即使是最基本和最麻煩的事件附帶此類內聯代碼文檔時，您還清楚（或記住！）您的代碼必須處理的各種瀏覽器特性，您有多自信？
// IE<9 dies on focus/blur to hidden element (#1486)
// IE doesn't fire change on a check/radio until blur; trigger it on click
// This still fires onchange a second time for check/radio after blur.
基於上述原因，我建議不要直接使用DOM。
使用jQuery的更好方法：
假設你有一個名為formDiv的div formDiv有三個input元素，其中只有一個input元素最初有editInput類。
<div id=formDiv>
<input type="text" name="test1" id="test1" />
<input type="text" name="test2" id="test2" class='editInput' />
<input type="text" name="test3" id="test3" />
</div>
使用jQuery，你可以簡單地做一些事情（我從你的代碼中復制了事件處理程序的實際邏輯）：
("#formDiv input").blur(function(){
if(this.className=='editInput'){
doStuff(this.target);
}
});
我認為這比你想要做的更接近於其他解決方案。 （在你的代碼中，你試圖將事件附加到包含輸入的div。我可能誤解了你的意圖，但我認為這是你想要的。）
您可以使用此jsFiddle嘗試此解決方案： http ： //jsfiddle.net/r7tuT/3/
一些離別的想法：
有人會告訴你這個或那個框架更好，他們可能是對的。 我只會評論jQuery是最受歡迎的，並且相當不錯。 選擇是你的，但正如我所說，我相信你應該盡早開始使用其中一個框架，因為它會提高你的工作質量，讓你在一眨眼之間做某些事情並改變你處理問題的方式。 當一個框架或編程語言對你這么做時，是你作為一個程序員生活中的一個偉大時刻:-)
解決方案4
0 2012-12-02 10:42:36
試試onblur而不是blur 。
blur是一種導致對象失去焦點的方法，而onblur是一個在對象失去焦點時引發的事件。
TinyMCE編輯器在彈出對話框中丟失了輸入框的焦點
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.