Question

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

一切正常，但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

Answer 2

类似这样的事情

$("input.ShowSave").keyup(function(e){
    if(e.which != 9){
        $(".SaveButton").css({'display':'block'});
    }
});

如何阻止tabkey触发keyup / keydown事件？

2 个答案: