Question

当输入框失去焦点时，我正在使用这样的事件监听器结构来做一些事情。但它不会起作用。我应该听哪个事件来获取当前输入框在其中丢失光标（用户在其外部点击）？

document.getElementById('div inside which input is located').addEventListener( 'blur',  function(e){ if(event.target.className=='editInput'){doStuff(event.target);} } , false );

Answer 1

正确的事件是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而不是输入？

Answer 2

var input = document.getElementsByTagName('input')[0];

input.onfocus = function() {
  this.className = 'highlight';
}

input.onblur = function() {
  this.className = '';
}

Answer 3

使用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的更好方法：

假设您有一个名为div的{{1}}，其中包含三个formDiv元素，其中只有一个元素最初具有input类。

editInput

使用jQuery，你可以简单地做一些事情（我从你的代码中复制了事件处理程序的实际逻辑）：

<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>

我认为，这比其他解决方案更接近您想要做的事情。（在您的代码中，您试图将事件附加到包含输入的div。我可能误解了您的意图，但我认为这是您想要的。）

您可以使用此jsFiddle尝试此解决方案：http://jsfiddle.net/r7tuT/3/

一些离别的想法：

有些人会告诉你这个或那个框架更好，他们可能是对的。我只会评论jQuery是最受欢迎的，并且相当不错。选择是你的，但正如我所说，我相信你应该尽早开始使用其中一个框架，因为它会提高你的工作质量，让你在一眨眼之间做某些事情并改变你处理问题的方式。当一个框架或编程语言对你这样做时，作为一个程序员，你的生活中是一个伟大的时刻： - ）

Answer 4

尝试使用onblur代替blur。

blur是一种导致对象失去焦点的方法，而onblur是当对象失去焦点时引发的事件。

如何抓住瞬间输入框失去焦点？

4 个答案: