jquery - 检测输入某个类的输入元素

Question

我需要检测何时有人在具有特定类的文本输入中点击“输入”。

我的jQuery如下：

$('input.large').keypress(function (e) {
    if(e.which ==13)
        console.log("pressed enter");
});

我的 HTML 是这样的：

<tr><td> Personal Name </td></tr>
<tr><td> <input type='text' class='large'> </td></tr>

<tr><td> Email</td></tr>
<tr><td> <input type='text' class='large'> </td></tr>

当我给出字段 ID 并尝试$('#elementid').keypress它时，它起作用了。但这行不通。我没有控制台输出。我错过了什么？

Answer 1

您可以在其中使用实时（.on()）事件（我认为这更好）。它将允许您检测与选择器匹配的当前和未来元素。documentkeydownkeydown

HTML：

<strong>Personal Name</strong>
<input type='text' class='large' /><br />

<strong>Email</strong>
<input type='text' class='large' />
​

JS（jQuery 1.7+）：

注意：.which, .code,.charCode和.keyCode现已弃用。使用以下新解决方案：

jQuery(document).on('keydown', 'input.large', function(ev) {
    if(ev.key === 'Enter') {
        // Will change backgroundColor to blue as example
        this.style.backgroundColor = '#EFF';

        // Avoid form submit
        return false;
    }
});

jsFiddle：http: //jsfiddle.net/david_proweb/fjgvhubn/2/

Answer 2

检查这个：http: //jsfiddle.net/EJyyr/

使用了这个html：

<tr><td> Personal Name </td></tr>
<tr><td> <input type='text' class='large' id='a'> </td></tr>

<tr><td> Email</td></tr>
<tr><td> <input type='text' class='large' id='b'> </td></tr>

这是jQuerywhich logs the input text id

$('.large').keypress(function (e) {
   if(e.which ==13)
    console.log($(this).attr('id'));
});

Answer 3

感谢大卫罗德里格斯的解释。它有很大帮助。我不得不升级我的 JQuery 库并且 .live() 函数停止正常工作。

您可以将其用于以下

单击 select_all_checkboxes 输入类型复选框时选择表单的所有复选框输入：

jQuery(document).on("click", "#select_all_checkboxes", function(){
    var chk = this.checked;
    $('input[id=selectAll]').each(function(){
        this.checked = chk;
    });
});

当用户使用选项卡或单击具有类名“email”的任何字段离开字段时调用函数“checkMail”：

jQuery(document).on("blur", 'input.email', function(event){
    var email = $(this).val();
    if (!checkMail(email)) {
        alert("Invalid email.");
        $(this).focus();
    }
});