title: form表單input按回車鍵默認(rèn)submit的情況
date: 2017-11-02 10:28:48
categories:
tags:
icon: fa-form
[TOC]
一、先說事件處理的幾種方式（no jQuery）
1.事件屬性
<!-- 事件句柄接收的參數(shù)中，事件對象只能為'event'步淹，'this'保留字為事件DOM本身 -->
<input type="text" onkeydown="foo(event, this)">
<script>
function foo(eventObj, eventTarget) {
console.log(eventObj);
console.log(eventTarget);
}
</script>
2.javascript添加屬性
通過js添加的事件會(huì)覆蓋已經(jīng)存在的事件。(類似一個(gè)屬性的修改)
<input type="text" id="a">
<script>
document.getElementById("a").onkeydown = function (e) {
console.log(e);
console.log(this);
}
</script>
3.javascript事件監(jiān)聽
通過addEventListener()添加的s事件不會(huì)覆蓋已存在到的事件吠架；通過removeEventListener()可以移出添加的事件
<input type="text" id="a">
<script>
// 所有主流瀏覽器怀薛，除了 IE 8 及更早 IE版本
document.getElementById("a").addEventListener("keydown", function (e) {
console.log(e);
console.log(this);
})
// IE 8 及更早 IE 版本
document.getElementById("a").attachEvent("onkeydown", function (e) {
console.log(e);
console.log(this);
})
</script>
二落萎、重現(xiàn)情況
情況1.只有一個(gè)input：input回車會(huì)submit
<form action="http://baidu.com">
<input type="text">
</form>
情況2.一個(gè)或多個(gè)input和一個(gè)或多個(gè)button：input回車會(huì)submit
<form action="http://baidu.com">
<input type="text" value="test1">
<input type="text" value="test2">
<button>btn1</button>
<button>btn2</button>
</form>
注意：form中button默認(rèn)type=‘submit’悯许，所以點(diǎn)擊button會(huì)submit
情況3.一個(gè)或多個(gè)input和一個(gè)或多個(gè)input(type='submit')：input回車會(huì)submit
<form action="http://baidu.com">
<input type="text" value="test1">
<input type="text" value="test2">
<input type="submit" value="btn2">
<input type="submit" value="btn3">
</form>
由2和3可知：form中下面三種表單控件（按鈕）是等效的
<input type="submit" value="btn"><button>btn</button><button type='submit'>btn</button>
三仆嗦、重現(xiàn)總結(jié)
在input中回車會(huì)submit：
- 如果form中只有一個(gè)input；
- 如果form中有submit類型的按鈕先壕；
四瘩扼、解決方法
對于情況1
- 添加隱藏的input：
<form action="http://baidu.com">
<input type="text" value="test">
<!-- 通過style設(shè)置隱藏 -->
<input type="text" value="" style="display: none">
<!-- 通過設(shè)置type='hidden'是無效的 -->
<!-- <input type="hidden"> -->
</form>
- 阻止input回車默認(rèn)事件
<form action="http://baidu.com">
<input type="text" value="test" onkeydown="fun(event)">
</form>
<script>
function fun (e) {
if (e && e.keyCode === 13){
e.preventDefault();
// return false; 無效
}
}
</script>
<!-- 以下等效 -->
<form action="http://baidu.com">
<input id="input_test" type="text" value="test">
</form>
<script>
document.getElementById("input_test").onkeydown = function(e) {
if (e && e.keyCode === 13){
e.preventDefault();
// return false; 有效
}
}
</script>
<!-- 以下等效 -->
<form action="http://baidu.com">
<input id="input_test" type="text" value="test">
</form>
<script>
document.getElementById("input_test").addEventListener("keydown", function(e) {
if (e && e.keyCode === 13){
e.preventDefault();
// return false; 無效
}
})
</script>
- 阻止form的默認(rèn)submit提交事件
<form action="http://baidu.com" onsubmit="fun(event)">
<input type="text" value="test">
</form>
<script>
function fun (e) {
e && e.preventDefault();
// return false; 無效
}
</script>
<!-- 以下等效 -->
<form action="http://baidu.com" id="form_test">
<input type="text" value="test">
</form>
<script>
document.getElementById("form_test").onsubmit = function(e) {
e.preventDefault();
// return false; 有效
};
</script>
<!-- 以下等效 -->
<form action="http://baidu.com" id="form_test">
<input type="text" value="test">
</form>
<script>
document.getElementById("form_test").onsubmit = function(e) {
e.preventDefault();
// return false; 有效
};
</script>
對于情況2和情況3
如果采用阻止默認(rèn)的submit事件（如下）谆甜，即使點(diǎn)擊btn3也不會(huì)submit了，這不是我們想要的邢隧。
<form action="http://baidu.com" id="form_test">
<input type="text" value="test1">
<input type="text" value="test2">
<button>btn1</button>
<button>btn2</button>
<button type="submit">btn3</button>
</form>
<script>
document.getElementById("form_test").onsubmit = function(e) {
e.preventDefault();
// return false; 等效
}
</script>
方法：給form里面的所有input的onkeydown事件取消默認(rèn)操作
<form action="http://baidu.com" id="form_test">
<input type="text" value="test1">
<input type="text" value="test2">
<button>btn1</button>
<button>btn2</button>
<input type="submit" value="submit">
</form>
<script>
var inputList = document.getElementById("form_test").getElementsByTagName("input");
Array.prototype.forEach.call(inputList, function(obj) {
obj.addEventListener("keydown", function(e) {
e.preventDefault();
//return false; 無效
})
});
</script>
四店印、總結(jié)
- 給按鈕添加type屬性，明確意圖倒慧，可以避免跳坑
- 盡量用ajax提交表單信息，盡量避免form提交
- 通過上面的比較包券，阻止事件中
e.preventDefault()相比return false在上述所有情況下均適用纫谅。
