仅通过_some字段上的Enter键禁用表单提交


73

我想保留常规的“按Enter键时提交表单”的行为,因为用户很熟悉。但是通过反射,他们通常会在输入文本框时输入回车-但实际上是在完成完整表格之前。

我只想劫持Enter键,然后再将焦点放在特定类别的输入上。

寻找 相关问题,这看起来像我在寻找什么:

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

但是这个if (document.addEventListener) {部分对我来说是陌生的。


2
这就是所谓的特征检测。如果浏览器使用addEventListener()添加事件侦听器的语法,则将addEventListener在每个DOM节点对象(特别是文档对象)中调用一个函数对象。转换为布尔值时,函数对象变为true,因此第一个分支运行。如果浏览器不理解addEventListener语法,则document.addEventListener它将是未定义的(将转换为false),并且将执行第二个分支中的后备代码。
Tgr

非常感谢可以解释的。谢谢!
justSteve 2010年

Answers:


135

您可以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);

49
您还需要记住,这bind('keypress', false);禁止所有数据输入。因此,如果要将其应用于文本输入元素,请使用第一个解决方案
hohner 2012年

4
如果您使用动态字段,则应将其更改为$('body').on('keypress', '.noEnterSubmit', function(){ ... });
seangates 2014年

3
使用类不适用于语义控制。最好对它使用data-nosubmit或类似的HTML 5数据属性。然后,$('[data-nosubmit]')是选择器。
Joerg Krause 2014年

3
@JoergKrause完全是主观的-我们使用js-className,并且效果很好,这取决于开发人员。类名在较旧的浏览器中也可以使用(并且可以快速运行-本机选择器引擎),并且是html4有效的(不是数据属性实际上会破坏html4)。
尼克·克拉弗

3

只需<Head>在HTML代码的标记中添加以下代码即可。它将在Enter键上提交表单对于表单上的所有字段

<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>

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

哇!这个为我工作。我使用的是asp:TextBoxAutoPostback="True"UpdatePanel。我需要在回车键上禁用回发,因为AutoPostback和回车键都触发了该TextChanged事件。简而言之,我需要一种只停止一个按钮上的回车键的方法,而不要覆盖回发。这很好用!+1
鹰眼

完美的清洁方式!但是它给了我警告“使用了
不赞成

1

要仅允许输入特定的类(在此示例中为“ 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;   
        }
    });
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.