javascript - 如何防止 tabkey 触发 keyup/keydown 事件？

Question

我用 class='ShowSave' 分配所需的标签，确保启动时不显示 SaveButton 容器，然后显示 SaveButton keyup 事件发生时的容器(数据输入)。

除了 Tab 键还会触发 keyup 事件外，一切正常，导致 SaveButton 容器在没有数据更改时显示。我尝试只使用 $(".ShowSave").change()，但 SaveButton 容器仅在我离开该字段后显示。这是不可取的。

jQuery:

$(".SaveButton").css({'display':'none'});
$("input.ShowSave").keyup*( function(){ $(".SaveButton").css({'display':'block'}); } );

HTML:

<form>
    <td><input class='ShowSave' name="foo" type="text" value='foo' tabindex='1'></td><
    <td class='SaveButton' ><img class='SaveImage' onClick='jsPostMe()' /></td>
</form>

提前感谢您的任何建议。我正在使用没有插件的直接 jQuery。

Answer 1

如果你的 keyup 事件，你想测试键码。像这样:

$("input.ShowSave").keyup(function(e){
    var code = e.which;
    //keycode 9 = tab
    if(code == 9) {
       return;
    }
    //do something
});

Here is a working example

这当然意味着也可能按下其他无效的键。您还可以包括对这些键代码 ( here is a list) 的检查，但如果您改为跟踪文本框的原始值，然后检查 keyup 上的更改，效果会更好。

像这样(注意:它使用了数据属性):

<input data-original="old" value="old" class="ShowSave" />

$("input.ShowSave").keyup(function(e){
    var original = $(this).data("original");
    var newValue = $(this).val();

    //check if value has changed
    if(original == newValue){
        $(".SaveButton").hide();
    }
    else{
        $(".SaveButton").show();
    }
});

Here is an example for this