14

按下后enter，我希望只有keyup事件被触发，但blur首先被触发。被解雇blur时如何取消？keyupenter

请不要建议将两者绑定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");
    }
});
4

8 回答 8

8

编辑

为了防止这两个事件触发，您必须以某种方式标记元素，然后才能使其失去焦点。这样，您的blur事件处理程序可以判断该事件是否是 keyup 的主题，或者它是否合法地失去了焦点。像这样的东西：

$(".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

这可以通过使用不会将焦点从元素上移开的东西来证明，例如：http console.log: //jsfiddle.net/GRMule/7vRLW/

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

于 2012-06-21T16:59:22.417 回答
5

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

因此，我没有在 Enter 上调用我的请求，而是尝试调用$input.blur()，并且成功了！这让我想到......如果 Enter 键导致模糊，我什至需要尝试捕捉它吗？

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

因此，我建议您要么根本不捕获 Enter，要么只需调用 blur() 来触发所需的操作。

于 2014-07-07T01:56:39.243 回答
2

我有一个输入，用户可以在其中更改、聚焦或按 Enter。但是当你按下回车键和模糊被触发，所以myFunction()被触发两次。

因此，不必为keydownand编写两个单独的函数blur，而是可以将它们放入一个函数中：

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

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

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

});
于 2017-06-03T02:44:27.537 回答
0

试试下面的。添加一个类——在本例中，在 keyup 事件处理程序中添加并修改模糊事件的选择器将阻止模糊事件处理程序触发。

$(".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");
    }
});
于 2015-08-05T06:39:08.957 回答
0

下面的代码对我有用，在 primefaces 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 键，也不会触发模糊事件。

于 2019-03-13T14:36:55.107 回答
0

基本上，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');
    });
于 2020-01-24T16:36:00.887 回答
-1

我无法更改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');
});
于 2014-09-27T06:23:00.373 回答
-3

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

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/了解原因），并且建议使用身份运算符 '===' 而不是javascript 中的相等 '=='，因为后者被破坏了（请参阅应在 JavaScript 比较中使用哪个等号运算符 (== vs ===)？）

于 2012-06-21T17:20:39.593 回答