javascript 按Enter键时阻止表单提交[重复]

moiiocjp  于 2023-01-19  发布在  Java
关注(0)|答案(7)|浏览(116)
    • 此问题在此处已有答案**:

(29个答案)
六年前关闭了。
我有一个表单的提交按钮被禁用。即使用户不能按此按钮,他仍然可以按Enter键提交表单。我如何防止这种情况?

qmelpv7a

qmelpv7a1#

如果您想 * 完全 * 禁用表单提交(但是我想知道为什么整个<form>元素会出现在第一个位置),那么您需要让它的submit事件处理程序返回false
所以,基本上:

<form onsubmit="return false;">

正如前面的回答所指出的,您可以在加载期间使用Javascript/DOM操作添加它。
如果您 * 只 * 想禁用Enter键来提交表单,那么当事件的keyEnter匹配时,您需要让它的keydown事件处理程序返回false(这个处理程序是跨浏览器兼容的,既包含默认的Enter键,也包含数字键盘Enter!)。

<form onkeypress="return event.key != 'Enter';">

但是,这也会禁用表单中任何<textarea>元素的Enter键。如果您有任何<textarea>元素,并且希望它们继续工作,那么您需要从<form>中删除onkeydown,并将其复制到所有<input><select>元素上。jQuery在这方面很有帮助:

$('input, select').keydown(event => event.key != 'Enter');

另请参见:

cyej8jka

cyej8jka2#

假设HTML:

<form id="myForm"> ...

您可以使用JavaScript实现此操作:

document.getElementById("myForm").onsubmit = function () {
    return false;
};
rggaifut

rggaifut3#

不要实现两种禁用表单提交的方法,而是在表单的onsubmit中添加一个事件处理程序,它将检查按钮的disabled属性:

myForm.onsubmit = function () { 
    if (myForm.mySubmit.disabled) 
        return false;
}
mec1mxoz

mec1mxoz4#

假设您有一个ID为“myForm”的表单:

<form id="myForm" action="some_file" method="post">
   ...
</form>
<script type="text/javascript">
    document.getElementById( "myForm").onsubmit = function() {
          return false;
    };
    //or with jQuery: $( '#myForm' ).submit( function() { return false; } );
</script>
rsl1atfo

rsl1atfo5#

如果不想编辑表单的onsubmit事件,可以这样做。
将以下内容添加到文本输入:

onKeyPress="return noEnter(event)"

把这个加到标题上:

function noEnter(e)
    {
        var key;
        // firefox vs. ie
        (window.event) ? key = window.event.keyCode : key = e.which;
        (key == 13) ? return false : return true;
    }

使用jquery更容易实现。

ibrsph3r

ibrsph3r6#

jQuery解决方案:

$(document).ready(function(){
  $('form[name="form"]').keypress( function(evt){
    return !(evt.which==13 && evt.target.type!='textarea');
  });
  $('form[name="form"] input[type="submit"]').attr('tabIndex',-1); // this prevents submit also by spacebar (keyCode==32)
  //$('form[name="form"]').submit(function(){ alert('test'); return false; }); // test
});
sq1bmfud

sq1bmfud7#

document.getElementById("myForm").onsubmit = function () {
    return false;
};

这些代码在Chrome和Safari上不起作用。它将表单提交到操作URL。
但是<form onsubmit="return false;">是有用的。

相关问题