Javascript 防止按钮在回车键时提交

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4075486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:22:37  来源:igfitidea点击:

Prevent a button to submit on enter key

javascriptjqueryjquery-plugins

提问by ??????q-????s

I have two buttons one with id=enterToSubmit and other with id=clickToSubmit. When a user hit the enterkey, I want "enterToSubmit" button to submit form not the "clickToSubmit" button.

我有两个按钮,一个是 id=enterToSubmit,另一个是 id=clickToSubmit。当用户按下回车键时,我希望“enterToSubmit”按钮提交表单而不是“clickToSubmit”按钮。

On the same page, I have a textbox id=title, and on Page Load I hide "enterToSubmit " button, until user enters something in the textbox, then users can hit Enter key to submit form.

在同一页面上,我有一个文本框 id=title,在页面加载时我隐藏了“enterToSubmit”按钮,直到用户在文本框中输入内容,然后用户可以按 Enter 键提交表单。

How do preven "clickToSubmit" button to submit when users press Enter key?

当用户按下 Enter 键时,如何防止“clickToSubmit”按钮提交?

回答by bobince

Unfortunately you can't change the ‘default' submit button in HTML, it's always the first input/buttonwith type submit/image.

不幸的是,您无法更改 HTML 中的“默认”提交按钮,它始终是第一个input/button类型为submit/ image

Whilst you can attempt to catch Enter keypressevents manually it is highly unreliable to do so, since Enter isn't always supposed to submit a form, depending on (a) what type of element is focused, (b) whether shift/ctrl+enter is used, (c) what other elements are in the form and (d) what browser it is. If you miss a case you will get accidental default-submissions; if you hit a case you shouldn't, you'll get accidental enter-submissions.

虽然您可以尝试keypress手动捕获 Enter事件,但这样做是非常不可靠的,因为 Enter 并不总是应该提交表单,这取决于 (a) 关注的元素类型,(b) 是否 shift/ctrl+enter使用,(c) 表单中有哪些其他元素以及 (d) 它是什么浏览器。如果您错过了一个案例,您将意外收到默认提交;如果您遇到不该遇到的情况,您会意外地收到输入。

So it is in general better, when you want to control the default submission action of a form, to put an extra button in as the first submit button in the form. If you don't want this button to be displayed, you can position it with a large negative leftvalue to push it off the side of the page. (This is a bit ugly, but hiding it via displayor visibilitywill stop it working in some browsers.)

所以一般来说,当你想要控制表单的默认提交操作时,将一个额外的按钮作为表单中的第一个提交按钮放置会更好。如果你不想显示这个按钮,你可以用一个大的负值来定位它,left把它推离页面的一侧。(这有点难看,但通过display或隐藏它visibility会阻止它在某些浏览器中工作。)

So perhaps you could ‘hide' the enter-to-submit button not by making it disappear but by pushing it off the page where it can't be seen, and then catching the clickevent on it to return falseand stop the form submission.

因此,也许您可​​以“隐藏”输入提交按钮,而不是让它消失,而是将其推离无法看到的页面,然后click在其上捕获事件return false并停止表单提交。

回答by Sarfraz

How do preven "clickToSubmit" button to submit when users press Enter key?

当用户按下 Enter 键时,如何防止“clickToSubmit”按钮提交?

Try this:

尝试这个:

$("#clickToSubmit").on("keydown", function(e){
   if(e.keyCode === 13){
       e.preventDefault();
   }
});

回答by AVISHEKKT47

    $('#formId').on('keyup keypress', function(e) {
          var keyCode = e.keyCode || e.which;
          if (keyCode === 13) { 
            e.preventDefault();
            return false;
          }
        });



Usually form is submitted on Enter when you have focus on input 
elements.
We can disable Enter key (code 13) on input elements within a form.

Also, As in some newer versions of Firefox the form submission is not prevented, it's safer to add the keypress event to the form as well.

此外,在某些较新版本的 Firefox 中,不会阻止表单提交,将 keypress 事件添加到表单中也更安全。

回答by Praveen Prasad

    jQuery('#clickToSubmit').click(function(e){    
       if(e.keyCode==13){          
            e.preventDefault();
       }    
    });

回答by sushil bharwani

First you have to make sure that both the buttons are not of type submit. Now on both this buttons you can call two different javascript functions. enterToSubmit() and clickToSubmit() also see that on enterToSubmit() you read the enter key press

首先,您必须确保两个按钮都不是提交类型。现在在这两个按钮上,您可以调用两个不同的 javascript 函数。enterToSubmit() 和 clickToSubmit() 还可以看到在 enterToSubmit() 上您阅读了 Enter 按键

if (e.keyCode === 13){ form.submit(); }

if (e.keyCode === 13){ form.submit(); }

and call form.submit()

并调用 form.submit()

while on clickToSubmit() you do a direct form.submit()

而在 clickToSubmit() 你做一个直接的 form.submit()

回答by Chinmayee G

Try this code for text box enter

尝试使用此代码输入文本框

$j("#title").keypress(function(e1){
   if(e1.keyCode==13){          // if user is hitting enter
       return false;
   }
});

for submit button

对于提交按钮

$j("#clickToSubmit").submit(function(e1){
   if(e1.keyCode==13){          // if user is hitting enter
       return false;
   }
});