需求,表單內(nèi)只存在一個(gè)input框時(shí),回車后需要觸發(fā)表單提交事件
問題一:回車后頁面刷新
解決方案:
在form表單內(nèi)設(shè)置:@submit.native.prevent
當(dāng)前form表單的(input)元素: @keyup.enter.native="handlePassword('password')"
原因:當(dāng)表單中只有一個(gè)input,按回車默認(rèn)是執(zhí)行提交表單事件(W3C標(biāo)準(zhǔn)規(guī)定如此)
問題二:在火狐瀏覽器中會(huì)出現(xiàn)如下情況
回車后input框會(huì)轉(zhuǎn)成英文fff,但此時(shí)會(huì)觸發(fā)
其他瀏覽器中并不會(huì)觸發(fā)
解決歷程:
1互捌、考慮使用keypress或keydown,但這時(shí)要考慮如果用戶一直按住enter鍵不放,那就會(huì)一直觸發(fā)胶果,與需求違背,不予考慮
2斤斧、在代碼中監(jiān)聽keydown和keyup事件早抠,看看是為什么會(huì)觸發(fā)enter的keyup事件?折欠?
<el-input
v-model.trim="form.add_project_form.name"
clearable
:placeholder="$t('operation.name')"
maxlength="50"
show-word-limit
@keydown.native="handleKeyDown"
@keyup.native="handleKeyUp"
/>
在谷歌瀏覽器中打印如下:
keydown: KeyF 229
keyup: KeyF 229
keyup: KeyF 70
keydown: KeyF 229
keyup: KeyF 229
keyup: KeyF 70
keydown: KeyF 229
keyup: KeyF 229
keyup: KeyF 70
火狐瀏覽器打印如下:
keydown: KeyF 229
keyup: KeyF 70
keydown: KeyF 229
keyup: KeyF 70
keydown: KeyF 229
keyup: KeyF 70
對(duì)比就會(huì)發(fā)現(xiàn)贝或,為什么火狐在中文輸入狀態(tài)下回車會(huì)觸發(fā),因?yàn)樗腸ode碼為13锐秦。
解決方案:
監(jiān)聽input框內(nèi)keydown事件咪奖,并記錄code。如果現(xiàn)在觸發(fā)了keyup.enter,對(duì)比一下當(dāng)前的code碼(13)和記錄到的keydown時(shí)的code碼,是不是都是13酱床,如果是就調(diào)用羊赵,如果不是,就忽略(可能就是火狐瀏覽器中出現(xiàn)的扇谣,中文輸入法下敲擊的回車)