如何捕捉输入框失去焦点的时刻？答案

【问题标题】：How to catch moment the input box lost focus?如何捕捉输入框失去焦点的时刻？
【发布时间】：2012-12-02 10:40:50
【问题描述】：

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

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

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

【问题讨论】：

在您的代码中，您试图将事件附加到包含输入的 div。您的意思是在 div 内的每个输入上附加事件处理程序吗？如果是这样，请看看我的回答。

标签： javascript html

【解决方案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 而不是输入？

【讨论】：

将尝试以另一种方式附加事件。谢谢！

【解决方案2】：

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

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

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

【讨论】：

do getElementsByTagName() 计算带有 display: none 的元素； ?
@lwiii 是的，当然！设置样式属性不会从文档的 DOM 树中删除元素（即使它是 display:none）:-)

【解决方案3】：

使用原生 Javascript 为模糊事件设置处理程序：

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

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

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

大局：

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

不幸的是，Web 开发人员必须面对的现实是许多浏览器具有相似但不完全相同的行为。在我们测试刚刚编写的代码时，仅仅找到一个恰好可以在我们碰巧使用的浏览器上工作的解决方案是不够的。我们需要确保我们的代码在我们的应用程序所针对的所有浏览器中都能正常工作。那么，如果您突然发现您分配模糊的方式甚至不适用于某些特定元素的浏览器，但另一种浏览器却可以，会发生什么？你是否在你的代码中到处都放 if's there？如果你走这条路，你确定你没有错过任何东西吗？然后，如果你发现另一个浏览器有另一个问题，你会添加另一个 if' 等等吗？也许你决定定义一个函数setBlurEventHandler 来执行它在盒子上所说的，并在你的代码中的任何地方使用它，而不是像上面这样的语句。你这样做只是为了模糊事件还是你所做的几乎所有事情？为其他事情做这件事也很有意义。伟大的。您现在有了一个编写跨浏览器兼容的代码的框架。如果我们所有人都将自己的框架留给自己，我们将花费大量时间重新发现和解决相同的问题。输入开源 Javascript 框架。您可以利用其他人投入的辛勤劳动时间来使用它们，但您也可以通过报告错误、编写代码和文档来做出贡献。这不是更有意义吗？（或者，如果在未来的某个时候，你确定你有一个基于一些非常聪明的想法的框架，尽管它不完整，那么一定要把它放在那里，看看你可以为社区提供什么以及社区可以做什么你……）

为了更好地说明这一点，让我向您展示一些取自 jQuery 源代码的 cmets。正如我之前所说，就跨浏览器的兼容性而言，文本输入上的模糊/焦点事件是最不麻烦的事件之一。但是，当处理即使是最基本和最不麻烦的事件都带有此类内联代码文档时，您是否知道（或记住！）您的代码必须处理的各种浏览器特性？

// 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，其中包含三个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】：

尝试onblur 而不是blur。

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

【讨论】：