vue3+ts+element-plus 表單el-form取消回車默認提交

更新時間：2025年01月06日 10:44:57 作者：BillKu

文章主要講述了在使用Element UI的el-form和el-input組件時,按回車鍵導致頁面刷新的問題,并提供了四種解決方法：阻止表單的默認提交事件、阻止keydown回車事件、在指定的el-input組件上阻止keydown回車事件以及在el-input中按特定組合鍵進行查找,感興趣的朋友一起看看吧

問題描述：在表單el-form中的el-input中按回車后，頁面會刷新，url也會改變，

回車前：

回車后：

相關代碼：

解決方法1：在 el-form 上阻止默認的 submit 事件，增加 @submit.prevent，在 el-form 上監(jiān)聽 submit 事件，并調用 event.preventDefault() 來阻止默認的提交行為。

解決方法2：在 el-form 上阻止默認的 submit 事件，增加 @submit.native.prevent，在 el-form 上監(jiān)聽 submit.native 事件，并調用 event.preventDefault() 來阻止默認的提交行為。

解決方法3：在 el-form 上阻止 keydown 回車事件，增加 @keydown.enter.prevent，在 el-form 上監(jiān)聽 keydown.enter 事件，并調用 event.preventDefault()來阻止默認的回車行為。

解決方法4：在指定的 el-input 組件上阻止 keydown 回車事件，增加 @keydown.enter.prevent，在 el-input 上監(jiān)聽 keydown.enter 事件，并調用 event.preventDefault()來阻止默認的回車行為。

擴展：

經(jīng)過上述調整后，在el-input中按回車后不會默認提交表單了，但還需要實現(xiàn)在el-input中按回車后進行查找（相當于點擊后面的查找按鈕）

修改后的代碼：

<!-- 使用 @keydown.enter.prevent 或 @submit.prevent 或 @submit.native.prevent 取消回車默認提交 -->
      <el-form inline style="height: 32px;" @keydown.enter.prevent>
        <el-form-item>
          <!-- 使用 @keydown.enter="onSearchClick" 按回車進行查找 -->
          <!-- 使用 @keydown.a.enter.b="onSearchClick" 按a鍵、回車鍵、b鍵都可以進行查找，注意：= 左邊的內(nèi)容不能使用大寫字母 -->
          <el-input v-model="name" placeholder="請輸入查找內(nèi)容" clearable @keydown.enter="onSearchClick">
            <template #append>
              <el-button :icon="Search" @click="onSearchClick" />
            </template>
          </el-input>
        </el-form-item>
      </el-form>

@keydown.enter="onSearchClick"
@keydown.a.enter.b.c.d……="onSearchClick" 按a鍵、回車鍵、b鍵、c鍵、d鍵都可以進行查找，注意：= 左邊的內(nèi)容不能使用大寫字母

到此這篇關于vue3+ts+element-plus 表單el-form取消回車默認提交的文章就介紹到這了,更多相關vue3+ts+element-plus 表單el-form取消回車內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: