form表单按enter键自动提交的问题

最新推荐文章于 2024-02-21 11:05:53 发布

.NET跨平台

最新推荐文章于 2024-02-21 11:05:53 发布

阅读量4.5k

点赞数 5

分类专栏： Html+Javascript

Html+Javascript 专栏收录该内容

258 篇文章 13 订阅

订阅专栏

1：form表单按enter键自动提交的情况

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <form method="post" action="http:www.baidu.com">
        <input>
        <textarea name="text" cols="20" rows="5" />
  </form>
 </body>
</html>

在此文本框中按enter键，页面会自动跳转到百度的搜索页面。

2：解决方案

1）去掉form表单。然后在文本框中按enter键就不会出现自动跳转的情况了。（不建议使用）

2）再添加一个隐藏的文本框。出现问题的原因是form表单中有且只有一个文本框。故新增一个隐藏的文本框也可解决问题。

<input style="display:none"/>

3)在表单上添加属性onsubmit="return false";也可以解决问题。

`form`表单中只有一个`input`时，按回车键后表单自动提交(form表单的一个小坑)

最近在给公司改项目时发现一个问题，按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新，先执行了js的方法后自动提交表单，使它相当于没有执行js方法，查阅资料得知在一个form表单中，若只有一个input，按回车键表单会自动提交，但是当表单中存在多个input时，按回车键不会执行任何操作，这是form表单的一个特性。

解决这个问题有四种方法，如下：

第一种方法，把表单去掉，这是最管用，但也是最傻的方法，直接添加onclick事件，不用表单提交，这种方法就不赘述了。
第二种方法，很多人估计都想到过，就是既然一个input会自动提交，多个input就没问题，那么我给它多加一个input不就行了，有些人试过发现不行，那是为什么呢？
因为他是这么写的<input type="hidden">，这样当然不行，一个隐藏域，type并不是text，所以不行。
但是，<input type="text" style="display:none;">，使用这种方法就可以了，因为它是用样式隐藏输入框的，实质上还是一个type为text的input。
第三种方法，这种方法很好用，直接对form进行操作，个人推荐这种方式。直接在form上加上onsubmit="return false;"这段话，它会阻止表单的回车键进行提交。
例：<form action="" method="post" onsubmit="return false;">
第四种方法，这种方法是直接对input进行操作，强行将回车键操作去掉，这种方式也不错，在input上加一个onkeydown事件，
onkeydown="if(event.keyCode==13){return false;}"，阻止回车键的操作。
例：<input type="text" onkeydown="if(event.keyCode==13){return false;}">

以上四种方法都可以防止表单中只有一个input时，按回车键会自动提交表单的问题。

【完全解决】取消回车自动提交表单

情景一：
form 中没有需要输入Enter键的控件，如没有textarea

方法一：在 form 标签上添加 'onkeypress'

<form ... onkeypress="return event.keyCode != 13;">

方法二：通过 JQuery 用代码统一处理

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

情况二：
form 中有 textarea，需要输入Enter 键，且此Enter键不造成Form的自动提交

方法一：笨办法 - 适用于控件不多的场景，每一个控件上单独添加屏蔽Enter键的输入，如：

<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...

方法二：用代码的方式来批量屏蔽，如下：

$(document).on("keypress", ":input:not(textarea)", function(event) {
    return event.keyCode != 13;
});

方法三：方法二的改良版，增加了对个别控件需要单独使用Enter键做其他操作的个别需求，可以使用如下方法：

$(document).on("keypress", ":input:not(textarea)", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

方法四：针对性屏蔽，比如仅开启 textarea 和 submit 按钮的Enter，如下：

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    // ...
});

HTML Button自动刷新页面的问题

一、问题

<button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-id="99" data-type="1">
<span class="am-icon-pencil-square-o"></span>修改
</button>

页面上有这样一个按钮，每次点击这个按钮的时候，执行完button的click事件后，会自动的重新刷新一下当前的页面。

二、原因

button,input type=button按钮在IE和w3c，firefox浏览器区别：
1、当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。
2、但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。

三、解决办法

为button按钮增加一个type=”button”属性。

<button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-id="99"  data-type=1>
<span class="am-icon-pencil-square-o"></span>修改
</button>