通常情況下，我們在頁面上操作輸入框的時候，像搜尋框，登入的時候，我們一般輸入完成後喜歡直接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型別，以防造成不必要的麻煩。