Question

按后输入我希望只触发keyup事件，但先激活blur。如何使用触发blur时取消keyup？

请不要建议将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");
    }
});

Answer 1

修改

为了防止两个事件都被触发，你必须以某种方式标记该元素，然后才能使它失去焦点。这样，您的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'); });

尝试一下：http://jsfiddle.net/GRMule/sR6zm/

原始回答

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

然后blur事件在keyup知道命中它之前跳入并完成其执行上下文。

通过使用不关注元素的内容来证明这一点，例如console.log：http://jsfiddle.net/GRMule/7vRLW/

事件触发的顺序是特定于实现的，这意味着您不能依赖于像IE一样的Firefox。请参阅规范：http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings。在IE中尝试使用警报提示，在这种情况下，您会看到blur在IE 7中keyup之前确实发现了 - 并且blur在Chrome中无法触发！

Answer 2

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

所以我没有在Enter上调用我的请求，而是尝试调用$input.blur()，这样就行了！这让我想到...如果Enter键导致模糊，我甚至需要尝试捕获它吗？

就我而言，我不需要。我发现我所需要的只是模糊，因为Enter键无论如何都会触发它。我不确定所有浏览器是否100％，但我测试了当前版本的Chrome，Firefox，IE和Safari，所有这些都运行良好。

所以，我建议您或者根本不捕获Enter，或者只是调用blur（）来触发您需要的操作。

Answer 3

我有一个输入，用户可以在其中进行更改，聚焦或按回车键。但是当你按下回车键时，触发了keydown和blur，所以myFunction()会被触发两次。

因此，不是为keydown和blur编写两个单独的函数，而是将它们放在一个函数中：

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

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

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

});

Answer 4

尝试以下方法。在此示例中，在keyup事件处理程序中添加类已添加并修改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");
    }
});

Answer 5

以下代码在我的5.2.5版中对我有用

<p:inputText onkeydown="if (event.keyCode === 13) {return false; }" value="#{myForm.name}"> <p:ajax event="blur" update="@this" listener="#{bean.func()}" /> </p:inputText>

即使按下Enter键也不会触发模糊事件。

Answer 6

基本上，Upload...是OK事件的触发器。当键盘启动时，您应该添加一个标志：

keyup

然后，当blur被解雇时，它应该询问$('#exemple').keyup(function (e) { if (e.which == 13) { $('#exemple').addClass('keyupfired'); alert('whatever'); } });是否也已经被解雇。如果您希望在用户离开文本框时触发事件，请记住删除该标志：

blur

Answer 7

我无法改变class属性，所以我最终得到了，

$(".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');
});

Answer 8

它引起了我的注意，而不是提供提示我应该提供更完整的解释和代码示例，所以这里是：总有一种设置外部变量的廉价方法：

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（请参阅http://api.jquery.com/event.which/了解原因），建议使用身份运算符＆＃39; ===＆＃ 39;而不是平等＆＃39; ==＆＃39;在javascript中，因为后者被破坏（见Which equals operator (== vs ===) should be used in JavaScript comparisons?）

按Enter键进入文本框后，防止模糊和键盘事件触发

8 个答案: