19

当输入框失去焦点时，我正在使用如下所示的事件侦听器结构来做一些事情。

但它不会起作用。我应该听什么事件，以获得输入框失去光标的那一刻（即用户点击它之外）？

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

4 回答 4

16

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

于 2012-12-02T10:52:25.900 回答
6 
var input = document.getElementsByTagName('input')[0];

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

input.onblur = function() {
  this.className = '';
}
于 2012-12-02T10:44:19.043 回答
3

使用 vanilla Javascript 为 blur 事件设置处理程序：

您可以使用以下代码为 vanilla jQuery 中的特定元素“test”设置模糊事件的处理程序

document.getElementById("test").onblur= yourEventHandler

您可以在您的问题中使用事件处理程序而无需任何修改。这就是涵盖的部分。不过，我相信这里还有很多话要说。

大图：

就跨浏览器的兼容性而言，文本输入上的模糊/焦点事件是最不麻烦的事件之一。但是，如果您打算进行任何认真的开发，我建议您使用 jQuery、YUI、Dojo、MooTools 等框架。这些都将帮助您编写更好的代码并避免出现兼容性问题。

不幸的是，Web 开发人员必须面对的现实是许多具有相似但不完全相同行为的浏览器。在我们测试刚刚编写的代码时，仅仅找到一个恰好可以在我们碰巧使用的浏览器上运行的解决方案是不够的。我们需要确保我们的代码在我们的应用程序所针对的所有浏览器中都能正常工作。那么，如果您突然发现您分配模糊的方式甚至不适用于某些特定元素的某些浏览器，而另一种则可以呢？你是否在你的代码中到处都放 if's there？如果你走这条路，你确定你没有错过任何东西吗？然后，如果你发现另一个浏览器有另一个问题，你会添加另一个 if' 等等吗？也许你决定定义一个函数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调用，其中只有一个元素最初具有该类。formDivinputeditInput

<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 是最受欢迎的，而且相当不错。选择是你的，但正如我所说，我相信你应该尽早开始使用其中一个框架，因为它会提高你的工作质量，让你在眨眼间完成某些事情并改变你处理问题的方式. 当一个框架或编程语言对你这样做时，是你作为编码员生活中的一个伟大时刻:-)

于 2012-12-02T11:39:00.820 回答
-1

尝试onblur代替blur.

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

于 2012-12-02T10:42:36.920 回答