jQuery 模糊和回车键答案

【问题标题】：jQuery blur and the enter keyjQuery 模糊和回车键
【发布时间】：2011-07-22 21:23:11
【问题描述】：

我正在尝试根据输入的邮政编码使用 googlemap 动态更新 div。如果用户将标签从输入框（id ZipCode）移开，但如果他们按下回车键，它就不会模糊该字段。我对 onkeyup 的工作有所了解，但是一个事件调用另一个事件并且它一团糟。如果任何一个事件发生，是否可以启动该功能。

$(文档).ready(函数() { $("#ZipCode").blur(function() { $("#dynamic").load('googlemap.php', {zipcode: $('#ZipCode').val(), maxdistance: $("input[name='MaxDistance']:checked").val () }, 功能（） { }); }); }) ;

感谢您的任何指点。

【问题讨论】：

标签： jquery blur

【解决方案1】：

你可以这样做：

 $(document).ready(function() {    
     $("#ZipCode").bind('blur keyup',function(e) {  
          if (e.type === 'blur' || e.keyCode === 13)  
          // do your stuff here  
     });  
  });

语法：event.keyCode
返回值：一个数字，表示 Unicode 字符代码或 Unicode 键代码

【讨论】：

只是一个旁注，在 ie 中我尝试了模糊，但该事件触发了焦点输出
我根据这个答案解决了我的问题，但我不得不用“keydown”替换“keyup”，否则我的表单在我的东西被执行之前就已经提交了。
@fpierrat，有同样的问题，通过将代码更改为if (e.type !== 'keyup' || (e.type === 'keyup' && e.keyCode === 13)) 解决了它，因此它可以使用 keyup 或 blur 类型触发

【解决方案2】：

你可以这样做：

$(document).ready(function() {
$("#ZipCode").bind('blur keyup', function(e) {
    if(e.type === 'keyup' && e.keyCode !== 10 && e.keyCode !== 13) return;
    $("#dynamic").load('googlemap.php', {zipcode: $('#ZipCode').val(), maxdistance:  $("input[name='MaxDistance']:checked").val() }, 
        function() {
        });
    });
}) ;

【讨论】：

是否需要同时检查 10 和 13？
...好吧，我正要说是的，然后发布一个指向 jsFiddle 的链接来证明这一点。 jQuery 是否规范化了 keyCode？好像回到过去，Enter 和 Return 分别发射了 13 和 10。这有变化吗？
这是一个真正的问题，而不是我试图指出代码的问题！ :) 我很想知道 - jQuery 是否规范化了 keyCode。我有一个快速的谷歌，找不到任何例子，除了 '13' 与 jQuery 一起使用。

【解决方案3】：

重新阅读您的问题后，我认为您想要做的是，当文本框（即#ZipCode）模糊时，更新 googlemap 元素；当按下回车键时，模糊文本框，进而更新 googlemap 元素。

在您提到的评论中，您不希望 Enter 键提交表单。您可能还需要处理keypress 事件。

$(document).ready(function() {
    $("#ZipCode").blur(function() {
        $("#dynamic").load('googlemap.php', {zipcode: $('#ZipCode').val(), maxdistance:  $("input[name='MaxDistance']:checked").val() }, 
            function() {
        });
    });

    $("#ZipCode").keyup(function(e) {
        if (e.which == 13) // Enter key
            $(this).blur();
    });

    // prevent the Enter key from submitting the form
    $('#ZipCode').keypress(function(e) { return e.which != 13; });
}) ;

【讨论】：

你的语法错了，“blur, keyup”应该是“blur keyup”。
它的工作不太正常，它似乎做了一个双重调用并提交页面。（我把我的输入框放在一个
里面，所以它应该验证）。
我根据您的评论和再次阅读您的问题修改了我的答案。

【解决方案4】：

只允许一个事件发生。您可以在事件blur 和keypress 中调用所需的函数。最后，必须在 blur 事件中调用实际或所需的函数。示例
<input disabled="true" type="text" placeholder="Enter Start Location" id = "fromPlaceEntry" onkeypress="startHandlingFromSubmission(event)" onblur="startHandlingFromSubmission(event)">
我们可以通过以下方式调用startHandlingFromSubmission()函数。

function startHandlingFromSubmission(e){
if(e.keyCode===13){ //To check enter event  
    $(e.target).blur();
}
if(e.keyCode===0){ //To check span event
    setTimeout(function() {
        handleFromPlaceSubmission(e);
    }, 200);
}
}

function handleFromPlaceSubmission(e){

        //This is the actual function which we desire to call
       if(e.keyCode === 0){ //executing only in case of blur event
       // your code goes here
       }
}

【讨论】：