Form表单中按回车键会自动提交表单的几种情况

1.表单里只有一个input[type=’text’]，不管按钮是什么type，当input中有输入值后，回车自动提交。

1
2
3
4
<form name="form_a" action="/weiui.php">
    <input type="text" name="txt_name">
    <span>提交</span>
</form>

2.表单里有一个input[type=’submit’]，当input中有输入值后，回车自动提交

1
2
3
4
5
<form name="form_a" action="/weiui.php">
    <input type="text" name="txt_01">
    <input type="text" name="txt_02">
    <input type="submit" value="提交">
</form>

3.如果button[notype]，IE下默认为button[type=’button’]，FF、Chrome默认为button[type=’submit’]

1
2
3
4
5
<form name="form_a" action="/weiui.php">
    <input type="text" name="txt_01">
    <input type="text" name="txt_02">
    <button>提交</button>
</form>

4.input[type=’image’]效果等同于input[type=’submit’]

5.textarea、select不影响，radio/checkbox在FF/Chrome下选中后会响应回车键，在IE下不响应

1
2
3
4
<form name="form_a" action="/weiui.php">
    <input type="radio" name="rio_a" checked>
    <button>提交</button>
</form>

二、禁用回车自动提交的几种方式：
1.同步提交：利用keydown事件屏蔽回车键
2.异步提交：禁用表单的submit事件

1
2
3
form.addEventListener('submit', function(e) {
    e.preventDefault();
});

转载申请

本作品采用知识共享署名 4.0 国际许可协议进行许可，转载时请注明原文链接，文章内图片请保留全部内容。