我有一個帶有多個表單的 web 應用程式，在這些表單中，有多個自定義組件：輸入、文本區域、選擇框、日期選擇器、單選按鈕、復選框……。
我發現在表單標簽的子組件內按下回車鍵時會觸發提交功能。我不想要的東西。我希望能夠將回車鍵用于其他事情，例如在下拉串列中符合選擇。
表格示例
<template>
<form @submit.prevent="handleLogin">
<fieldset :disabled="isSubmitting" class="space-y-6">
<Input :label="$tc('email', 1)" type="email" id="email" v-model="user.email" :error="errors.email" />
<Input :label="$tc('password', 1)" type="password" id="password" v-model="user.password" :error="errors.password" />
<Select :label="$tc('role', 1)" id="role" :options="roles" displayProperty="display_name" valueProperty="id" v-model="user.role" :error="errors.role" />
<SubmitButton :label="$tc('register', 1)" :submittingLabel="$tc('register_loader', 1)" :isSubmitting="isSubmitting" />
</fieldset>
</form>
</template>
提交按鈕.vue
<button type="submit">{{ isSubmitting ? submittingLabel : label }}</button>
因此，我正在尋找一種防止默認行為的方法。添加一個 keydown 函式并檢查是否在所有自定義組件內按下了 Enter 鍵，然后是一個event.preventDefault()沒有做的伎倆。
一個可行的解決方案應該是將按鈕的型別從“提交”更改為“按鈕”并使用 @click 但這聽起來不像語意 html。
還有其他建議嗎？
uj5u.com熱心網友回復：
您可以防止提交回車鍵，只需注釋頂級表單即可。
<form @submit.prevent="handleLogin" @keydown.enter="$event.preventDefault()">
你可以看到它在行動
uj5u.com熱心網友回復：
我認為
<form v-on:submit.prevent="onSubmit"></form>
應該做的伎倆。如果沒有，請查看Event-Modifiers以找到最適合您的用例的那個。快樂編碼！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/369120.html
標籤：javascript 形式 Vue.js
下一篇：將物件轉換為URL