快捷導(dǎo)航

vue3+ts+element-plus 表單el-form取消回車默認(rèn)提交

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

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

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

回車前：

回車后：

相關(guān)代碼：

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

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

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

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

擴(kuò)展：

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

修改后的代碼：

<!-- 使用 @keydown.enter.prevent 或 @submit.prevent 或 @submit.native.prevent 取消回車默認(rèn)提交 -->
      <el-form inline style="height: 32px;" @keydown.enter.prevent>
        <el-form-item>
          <!-- 使用 @keydown.enter="onSearchClick" 按回車進(jìn)行查找 -->
          <!-- 使用 @keydown.a.enter.b="onSearchClick" 按a鍵、回車鍵、b鍵都可以進(jìn)行查找，注意：= 左邊的內(nèi)容不能使用大寫字母 -->
          <el-input v-model="name" placeholder="請(qǐng)輸入查找內(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鍵都可以進(jìn)行查找，注意：= 左邊的內(nèi)容不能使用大寫字母

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

您可能感興趣的文章: