如何在文本框中获取 Enter 键以触发功能而不是第一个/默认按钮

Posted 2023-02-22

【中文标题】如何在文本框中获取 Enter 键以触发功能而不是第一个/默认按钮

【英文标题】：How to get the Enter key within a textbox to trigger a function and not the first/default button

【发布时间】：2012-06-15 15:16:34

【问题描述】：

我试图让 Enter 键在某个文本框内被按下时触发一个功能，而不是触发第一个或默认按钮。

您可以在此处查看正在发生的事情的示例：http://jsfiddle.net/cutsomeat/WZ6TM/1/

如果你按下其他键，你会得到一个带有键码的警告框，但如果你按下 Enter 键，你将不会得到带有键码的警告框，而是按钮点击事件中的警告框。

显然 Enter 键是触发按钮。有没有办法避免这种情况，而是在 keyup 事件中捕获 Enter 键，然后触发另一个函数？

【参考方案1】：

试试这个：

$('#myText').on("keypress", function(e) 
        if (e.keyCode == 13) 
            alert("Enter pressed");
            return false; // prevent the button click from happening
        
);

Demo

【讨论】：

.live() 现已贬值。请改用.on()。

最好使用bind() 而不是on() 或更糟糕的live()

使用on()。 bind() 现已折旧。

【参考方案2】：

$(document).ready(function() 

    $('#myText').keypress(function(e) 
        if ( e.keyCode == 13 )   // detect the enter key
            $('#myButton').click(); // fire a sample click,  you can do anything
        
    );

    $('#myButton').click(function(e) 
        alert('Button click activated!');
    );

);

DEMO

对于实时元素，请使用.on()，如下所示：

$(document).ready(function() 

    $(document).on('keypress', '#myText', function(e) 

        if ( e.keyCode == 13 )   // detect the enter key
            $('#myButton').click(); // fire a sample click,  you can do anything
        
    );

    $(document).on('click', '#myButton', function(e) 
        alert('Button click activated!');
    );

);

【讨论】：

我很想对此 +1，但你真的应该解释为什么 keyup 比 keydown/keypress 更好

【参考方案3】：

在 keyDown 中执行e.preventDefault() 以避免按钮的默认操作：

$('#myText').keydown(function(e) 
    if (e.keyCode == 13) 
        e.preventDefault();
    
    alert(e.keyCode);
);

【讨论】：

把 if (e.keyCode = 13) 改成 if (e.keyCode == 13)

【参考方案4】：

使用.on()，因为.live() 一直是deprecated。

$(document).on("keypress", ".myText", function(e) 
     if (e.which == 13) 
         //do some stuff
     
);