仅在 _some 字段上通过 Enter 键禁用表单提交答案

【问题标题】：Disable form submission via Enter key on only _some fields仅在 _some 字段上通过 Enter 键禁用表单提交
【发布时间】：2011-02-17 03:38:15
【问题描述】：

我想保留传统的“按 Enter 时提交表单”行为，因为用户很熟悉。但是通过反射，当他们完成一个文本输入框时，他们经常按回车 - 但在他们真正完成完整表单之前。

我只想在焦点集中在某类输入时才劫持 Enter 键。

寻找Related Questions 这看起来像我要找的东西：

if (document.addEventListener) {
    document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false);
} else {
    document.getElementById('strip').onkeypress = HandleKeyPress;
}

但if (document.addEventListener) { 部分我不熟悉。

【问题讨论】：

这就是所谓的特征检测。如果浏览器使用addEventListener() 语法来添加事件监听器，那么在每个DOM 节点对象（特别是在文档对象中）都会有一个名为addEventListener 的函数对象。函数对象在转换为布尔值时变为真，因此第一个分支运行。如果浏览器不理解 addEventListener 语法，document.addEventListener 将未定义（转换为 false）并执行第二个分支中的回退代码。
非常感谢解释。谢谢！

标签： jquery webforms

【解决方案1】：

您可以捕获并取消在这些字段中输入keypress，如下所示：

$('.noEnterSubmit').keypress(function(e){
    if ( e.which == 13 ) return false;
    //or...
    if ( e.which == 13 ) e.preventDefault();
});

然后在您的输入中给他们一个class="noEnterSubmit" :)

展望未来，以防其他人稍后发现，在 jQuery 1.4.3（尚未发布）中，您可以将其缩短为：

$('.noEnterSubmit').bind('keypress', false);

【讨论】：

您还需要记住bind('keypress', false); 将禁止所有数据输入。因此，如果您想将此应用于文本输入元素，请使用第一个解决方案
如果你使用动态字段，你应该把它改成$('body').on('keypress', '.noEnterSubmit', function(){ ... });
使用类不适合语义控制。最好使用 data-nosubmit 或类似的 HTML 5 数据属性。 $('[data-nosubmit]') 是选择器，那么。
@JoergKrause 这完全是主观的 - 我们使用 js-className 并且它工作得很好，这取决于开发人员。类名在旧版浏览器中也可以工作（并且工作速度很快 - 本机选择器引擎）并且是 html4 有效的（不是数据属性实际上会破坏 html4）。

【解决方案2】：

只允许输入特定类（在本例中为“enterSubmit”）：

jQuery(document).ready(function(){
    jQuery('input').keypress(function(event){
        var enterOkClass =  jQuery(this).attr('class');
        if (event.which == 13 && enterOkClass != 'enterSubmit') {
            event.preventDefault();
            return false;   
        }
    });
});

【讨论】：

【解决方案3】：

只需在您的 HTML 代码中的 <Head> 标签中添加以下代码。它将在表单上的所有字段的输入键上提交表单

<script type="text/javascript">
    function stopEnterKey(evt) {
        var evt = (evt) ? evt : ((event) ? event : null);
        var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
        if ((evt.keyCode == 13) && (node.type == "text")) { return false; }
    }
    document.onkeypress = stopEnterKey;
</script>

【讨论】：

【解决方案4】：

 <input type="text"  onkeydown="return (event.keyCode!=13);" />

【讨论】：

哇！这个对我有用。我在UpdatePanel 中使用asp:TextBox 和AutoPostback="True"。我需要禁用回车键上的回发，因为AutoPostback 和 Enter 键都触发了TextChanged 事件。所以简而言之，我需要一种方法来仅在一个按钮上停止输入键，而不覆盖回发。这非常有效！ +1
完美的清洁方式！但是它给了我警告“使用了已弃用的符号，请查阅文档以获得更好的选择”