检测输入某个类的输入元素答案

【问题标题】：Detect enter in input elements of a certain class检测输入某个类的输入元素
【发布时间】：2012-12-02 18:26:17
【问题描述】：

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

我的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 时，它起作用了。但这行不通。我没有控制台输出。我错过了什么？

【问题讨论】：

您是否将代码放入文档就绪处理程序中？
我有。在此之前和之后的其他代码都可以正常工作。
你能在jsfiddle.net提供一个演示吗？
应该可以工作 - jsfiddle.net/vYfGQ
我知道...这段代码没有任何问题。而且我不能粘贴所有代码，因为它太多了，一定有什么东西阻止它。

标签： jquery class keypress enter

【解决方案1】：

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

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 现在是 deprecated。使用以下新解决方案：

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/

【讨论】：

我应该把这个放在哪里？我在$(document).ready(function(){...}); 内部和外部都试过了，但无论哪种方式都有语法错误。
这个语法错误在哪里？ 试一试：在文件末尾创建一个包含此内容的专有 <script> 元素。如果它不起作用，请使用 Chrome 并启用调试以准确了解错误在哪里。
行尾有一个隐藏的（零宽度）unicode字符：\u200b。似乎是换行符：stackoverflow.com/a/7077279/295246 我知道这是旧的，但我想我会分享！ :)
属性which、code、charCode 和keyCode 已弃用developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent，请在您的答案中添加实际信息。

【解决方案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>

这是 jQuery which logs the input text id

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

【讨论】：

【解决方案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();
    }
});

【讨论】：

虽然您的回答很受赞赏，但对其他用户回答的评论应该就是这样。