form表单提交之Enter提交

通常情况下，我们在页面上操作输入框的时候，像搜索框，登录的时候，我们一般输入完成后喜欢直接enter去获取结果，然而尴尬的是当我们在注册的时候，则不喜欢每填完一个内容就enter提交了。其实根据业务的不同需要，需要我们去判断，在这之前需要我们去了解一下浏览器的一些默认行为，以下是总结的经验，亲测，可用。

如果表单里只有一个type=”text”的input，不管按钮是什么type(或有无提交按钮)，回车键生效。Chrome/FX/IE均适用

<form action="http://www.baidu.com">
    <input type="text"/>
    <!--<input type="submit" value="提交">-->
    <input type="button" value="提交"/>
    <!--<input type="radio" value="提交"/>-->
    <!--<input type="checkbox" value="提交"/>-->
    <!--<button>提交</button>-->
    <!--<div>提交</div>-->
</form>
<!--注意：只有一个type="text"的input时，不管form中还有什么内容，enter按下后均会提交-->
<!--业务场景并不是都需要enter提交-->
<!--1、需要enter提交，但是想要按enter和提交按钮执行操作一致-->
<!--$(document).keyup(function(event){
    if(event.keyCode ==13){
        $("form").trigger("click");//前提得有一个form的onsubmit点击事件
    }
});-->
<!--2、禁用按enter进行提交-->
<!--页面上隐藏一个<input type="text" style="display:none">-->

只要有type为submit的按钮存在，一个文本框还是多个文本框都提交,Chrome/FX/IE均适用

<form action="http://www.baidu.com">
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="radio" />
    <input type="checkbox" />
    <input type="submit" value="提交">
    <input type="submit" value="提交" style="display:none;">
    <!--<button>提交</button>-->
    <!--<div>提交</div>-->
</form>

只要有type为submit的按钮存在，多个form时同样适用，光标在那个form表单里提交那个表单,Chrome/FX/IE均适用

<form action="http://www.baidu.com" style="border: 1px solid #ddd;margin-bottom: 50px;padding: 20px;width: 300px;">
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="radio" />
    <input type="checkbox" />
    <input type="submit" value="提交" class="submit1">
    <!--<button>提交</button>-->
    <!--<div>提交</div>-->
</form>
<form action="http://www.kugou.com/" style="border: 1px solid #ddd;padding: 20px;width: 300px;">
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="radio" />
    <input type="checkbox" />
    <input type="submit" value="提交" class="submit2">
</form>
<!--为type='submit'的元素添加点击事件，在按回车的时候点击事件的方法同样执行了，此时按回车和加点击事件不冲突-->
<!--$(".submit1").click(function () {
    alert("为type='submit'的元素添加点击事件，在按回车的时候点击事件的方法同样执行了");
});-->

多个文本框的时候，用type为button的按钮，按enter无法进行提交,Chrome/FX/IE均适用

<form action="http://www.baidu.com" style="border: 1px solid #ddd;margin-bottom: 50px;padding: 20px;width: 300px;">
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="radio" />
    <input type="checkbox" />
    <input type="button" value="提交" class="submit1">
</form>
<!--1、需要enter提交，但是想要按enter和提交按钮执行操作一致-->
<!--$(document).keyup(function(event){
    if(event.keyCode ==13){
        $("form").trigger("click");//前提得有一个form的onsubmit点击事件
    }
});-->

用button元素时，button元素不指定type时，enter默认都会提交。Chrome/FX/IE均适用

<form action="http://www.baidu.com" style="border: 1px solid #ddd;margin-bottom: 50px;padding: 20px;width: 300px;">
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="radio" />
    <input type="checkbox" />
    <button>提交</button>
</form>

用button元素时，button元素指定type=submit时，enter默认都会提交,其他type类型按enter均不进行提交。Chrome/FX/IE均适用

<form action="http://www.baidu.com" style="border: 1px solid #ddd;margin-bottom: 50px;padding: 20px;width: 300px;">
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="radio" />
    <input type="checkbox" />
    <button type="submit">提交</button>
</form>

type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。Chrome/FX/IE均适用

<form action="http://www.baidu.com" style="border: 1px solid #ddd;margin-bottom: 50px;padding: 20px;width: 300px;">
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="text"/>
    </br></br>
    <input type="radio" />
    <input type="checkbox" />
    <input type="image" />
</form>

以上是总结的一些form表单提交浏览器的一些默认行为，需要我们加强注意。其中关于button的使用过程中，建议我们每次都指明button的type类型，以防造成不必要的麻烦。

form表单提交之Enter提交

猜你喜欢