Question

我有一个只有一个输入字段的简单html文件：

<input value="Hello">

我想要的是，当用户点击输入字段时，他/她将能够编辑文本，然后完成编辑并点击其他地方（不在内部）在窗口中，用户将获得具有新输入的警报。

我的JS代码是：

$('document').ready(function(){
   $($('input')[0]).click(function() {
      alert('OK1');
      $(this).addClass('input-edit');
      $($(window)[0]).click(function() {
         alert('OK2');
         var text = $('input').value;
         alert(text);
      });
      $($('input')[0]).click(function(e) {
         e.stopPropagation();
         return false;
      });
   })
})

但是，当我运行代码时，我发现当我第一次在文本字段中单击时，代码的行为就像它自动获得两次点击一样，所以我得到3个警报：

OK1 OK2未定义

您知道我能做些什么来确保第二次点击的行为符合我的预期吗？

Answer 1

给出目标的id和id或者我在下面做的任何事情并尝试模糊事件。此外，这是工作JSFiddle https://jsfiddle.net/wr1ncvbn/

<input type="text"/ id="target">

$('#target').blur(function() {
    alert($(this).val());
});

Answer 2

我认为你错过了模糊事件。元素失去焦点（在这种情况下是光标）的事件称为blur事件。您只需添加一个事件处理程序来模糊输入元素的事件。尝试

$('input').blur(function(e) {
    alert($(this).val());
}

由于您只有一个输入元素，因此不需要获取0索引元素。

如何添加一个EventListener，它监听除特定元素之外的窗口上的每次单击

2 个答案: