Javascript 防止在文本框中按enter键后触发模糊和按键事件

按enter键后，我希望仅触发

keyup

事件，但首先触发

blur

。当使用enter键触发

keyup

时，如何取消

blur

请不要建议将

blur

和

keyup

绑定到单个

live（）

方法中

$(".textbox").on("blur",function () { 
    alert("blur Event fired");
});

$(".textbox").on("keyup",function (event) { 
    if(event.keyCode == 13){ // Detect Enter
        alert("KeyUp fired after pressing Enter");
    }
});

编辑

为了防止两个事件都触发，您必须在使元素失去焦点之前以某种方式标记该元素。这样，您的

blur

事件处理程序就可以判断该事件是否是键控的主题，或者它是否合法地失去了焦点。大概是这样的：

$(".textbox").live("blur",function (event) {
    if (!$(this).hasClass('keyupping'))
        alert("blur Event fired");
});

$(".textbox").live("keyup",function (event) {
    $(this).addClass('keyupping');
    if(event.keyCode == 13){ // Detect Enter
        alert("KeyUp fired after pressing Enter");
    }
    $(this).removeClass('keyupping');
});

试一试：

---

原始答案

当触发

keyup

事件时，它准备绘制浏览器警报对话框，该对话框从文档中获取焦点并将其应用于模式对话框。这会触发模糊事件

然后，

blur

事件跳入并在

keyup

知道是什么击中它之前完成其执行上下文

这可以通过使用一些不会将焦点从元素上移开的东西来演示，例如

console.log

：

---

事件触发的顺序是特定于实现的，这意味着您不能依赖Firefox像IE一样工作。请参阅规范：。在IE中尝试拨弄警报，在这种情况下，您将看到IE 7中的

blur

在

keyup

之前确实会触发，而

blur

在Chrome中不会触发

我已经注意到了这一点，我应该给出更完整的解释和代码示例，而不是提供提示，所以这里是： 设置外部变量总是有一种便宜的方法：

var triggerBlur = true;
$(".textbox")
    .live({
       blur : function () { 
        if (triggerBlur) {// if not preceded by keyup 'Enter' event
            alert("blur Event fired");
        }
        // reset variable to true to allow the blur event to be triggered subsequently when not preceded by keyup 'Enter' event
        triggerBlur = true;
      },
      keyup : function (event) { 
        if(event.which === 13){ // Detect Enter
            alert("KeyUp fired after pressing Enter");
            triggerBlur = false;
        }
      });

---

此外，最好使用event.which而不是event.keyCode（请参阅以了解原因），并且建议在javascript中使用标识运算符“==”而不是等式“==”，因为后者被破坏（请参阅）

我也遇到了类似的问题。我允许用户编辑单个字段，当他们按Enter键或移出该字段时，我会发送一个Ajax请求来更新它。我发现当我按下Enter键时，Ajax请求被发送了两次

因此，我没有按Enter键调用我的请求，而是尝试调用

$input.blur（）

，结果成功了！这让我想到。。。如果回车键导致模糊，我甚至需要尝试捕捉它吗

就我而言，我不需要这样做。我发现我所需要的只是模糊，因为回车键触发了它。我不确定在所有浏览器中是否都是100%，但我在当前版本的Chrome、Firefox、IE和Safari上进行了测试，所有这些都运行良好

---

因此，我建议您要么根本不捕获Enter，要么直接调用blur（）来触发所需的操作。

我无法更改

类

属性

$(".textbox").on("blur",function () { 
    if($(this).attr('flag')!='1') 
        alert("blur Event fired");
});

$(".textbox").on("keyup",function (event) { 
    $(this).attr('flag','1');
    if(event.keyCode == 13){ // Detect Enter
        alert("KeyUp fired after pressing Enter");
    }
    $(this).attr('flag','0');
});

---

尝试以下方法。在本例中，在keyup事件处理程序中添加一个类--added，并修改blur事件的选择器将防止blur事件处理程序触发

$(".textbox:not(.added)").on("blur", function () { 
    alert("blur Event fired");
});

$(".textbox").on("keyup", function (event) { 
    if (event.keyCode == 13) {
        $(event.currentTarget).addClass('added');
        alert("KeyUp fired after pressing Enter");
    }
});

---

我有一个输入，用户可以在其中更改、调出焦点或按enter键。 但当您按下enter键时，会同时触发keydown和blur，因此

myFunction（）

会被触发两次

因此，不必为

键控

和

模糊

编写两个单独的函数，您可以将它们放在一个函数中：

my_input.on('keydown blur', function (e) {

    // was it the Enter key?
    if (e.which == 13) {
        $(this).blur();
    }

    if (e.type == 'blur') {
        myFunction();
    }

});

---

下面的代码在primefaces 5.2.5中对我有用

---

即使按了Enter键，也没有触发模糊事件。

基本上，

keyup

是

Blur

事件的触发器。当启动keyup时，应添加一个标志：

 $('#exemple').keyup(function (e) {
        if (e.which == 13) {
            $('#exemple').addClass('keyupfired');
            alert('whatever');
        }
    });

然后，当触发

blur

时，它应该询问是否也触发了

keyup

。如果希望在用户离开文本框时触发事件，请记住删除该标志：

$('#exemple').on("blur", function () {
        if (!$('#exemple').hasClass('keyupfired')) {
            alert('whatever');
        }
        $('#exemple').removeClass('keyupfired');
    });

---

那么谁说模糊不应该开火？注意：

live（）

已被弃用，尽管这与您的问题无关。请尝试

keypress

而不是

keyup

，并使用

on

而不是

live

嘿，这是一个相关的问题。请重新打开它。这是我刚刚遇到的一个真正的问题，在模糊之前必须让keyup工作。但问题是，我是否可以在按Enter键后取消

blur

事件触发？请参见编辑。由于

blur

不接收任何键盘信息，您将无法检测到涉及的键。事实上，关键不是元素失去焦点的原因，而是警报在起作用。这会起作用一次，而且只起作用一次，并污染全球范围。糟糕的做法。“那只能工作一次，而且只能工作一次”：好吧，这真的取决于你如何组织你的整个代码污染全球范围：相同；好的，这确实是一个相当便宜的方法，但他正在寻找一个解决方案；您的解决方案将dom用于数据，这也是一种不好的做法。[需要引用]——将类添加到dom元素不是一种不好的做法。Chris，如果只是为了记住一个状态，那就是。我会尽量避免与dom交互，这不是它的工作。并且在document.ready中使用变量不是全局范围；）。你看，我不会放手的：D！同样，[需要引用]。尽管没有放弃，但事实仍然是，答案中的代码从未将

triggerBlur

变量重置为

true

，因此它只工作一次——这不是功能性解决方案。我的解决方案除了可以处理多次之外，还能够处理页面上的多个表单元素。在这种情况下，代码也无法执行。我希望你能意识到，再多的评论或辩论也不能改善这个答案中的代码，这不是一场竞赛。代码要么有效，要么无效；这个代码没有，我的代码有。我们在处理事实，很好的解决方案。对我来说，按Enter键不会自动触发模糊事件f