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

骑猪看日落 2021-06-26 16:06 635阅读 0赞

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表单中有且只有一个文本框。故新增一个隐藏的文本框也可解决问题。

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

--------------------

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

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

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

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

方法二： 通过 `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`的`click`事件后，会自动的重新刷新一下当前的页面。

### 二、原因 ###

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

### 三、解决办法 ###

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