form表單input回車提交問題

問題：文本框輸入完成後點擊回車頁面刷新
問題出在form上，當表單中只有一個文本框的時候獲取焦點並點擊回車以後會提交表單內容，就會發生刷新事件。

解決方法：

一、增長一個隱藏的輸入框

<input itype="text" style="display:none" />

增長了一個隱藏的輸入框以後，表單的文本框再也不是惟一的，回車不會觸發提交事件

二、去掉輸入框的回車事件

<input type="text"  onkeydown="return ClearSubmit(event)" />
function ClearSubmit(e) {
    if (e.keyCode == 13) {
        return false;
    }
}

可是有的需求又要有回車事件，視狀況選擇

三、阻止表單默認提交事件

若是 onsubmit 句柄返回 fasle，表單的元素就不會提交。若是該函數返回其餘值或什麼都沒有返回，則表單會被提交。

        因爲 onsubmit 句柄能夠取消表單的提交，因此它對於進行表單驗證是十分理想的；

        這樣的話，修改form的onsubmit事件可讓敲入回車的時候執行咱們想要的操做而不跳轉到action所指定的url，以下

<form action="myurl" onSubmit="fun1();return false;">

　　

變種：element官方解決方案：在el-from 加上 @submit.native.prevent

<el-form :inline="true"  class="demo-form-inline"  @submit.native.prevent>
    <el-form-item label="名稱:" style="margin-bottom:0">
    <el-input placeholder="名稱" @keyup.enter.native="doFilter(5)"  v-model="likeName"></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom:0">
    <el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0">查詢</el-button>
    </el-form-item>
</el-form>