先以html為例年局,el-input雷同(el-input在最后~)
1逻谦、場(chǎng)景
如果form表單中颖变,只要有一個(gè)可輸入的輸入框,輸入內(nèi)容后回車(enter鍵)會(huì)默認(rèn)提交整個(gè)表單(瀏覽器默認(rèn)行為)听想。
網(wǎng)上說表單中只有一個(gè)輸入框時(shí)回車才會(huì)觸發(fā)表單提交腥刹,但是我試了輸入框+按鈕、輸入框+多選汉买、輸入框+隱藏域衔峰,只要在輸入框中回車就會(huì)提交整個(gè)表單,但是我在element中又沒有發(fā)現(xiàn)這個(gè)問題蛙粘,難道element在封裝的時(shí)候處理了還是怎么滴垫卤,原因我暫時(shí)沒找到。
2出牧、解決
看了其他大佬的文章后穴肘,暫時(shí)有4種解決辦法
2.1 禁用整個(gè)頁面的enter事件(不建議使用)
2.2 禁用input框的回車功能——按下回車時(shí),直接return false就不會(huì)提交表單啦
2.3 去除form——沒啥特別的舔痕,不放在form里就可以了(手動(dòng)笑哭)
2.4 在form上添加onsubmit="return false"评抚,會(huì)直接阻止表單回車提交(推薦)
3、el-form:
使用@submit.native.prevent阻止表單默認(rèn)行為
注意使用keyup.enter.native是沒有用的伯复,雖然告訴Input使用原生事件慨代,但是并沒有阻止表單的默認(rèn)行為~
遺留問題
1、input綁定keydown事件的時(shí)候边翼,方法寫在window.onload里為什么不行鱼响??组底?(在報(bào)方法未定義)
原因:window.onload在整個(gè)頁面加載完的時(shí)候才會(huì)加載,在瀏覽器繪制input的時(shí)候檢測(cè)到有綁定事件筐骇,此時(shí)由于js還未被加載债鸡,所以報(bào)方法未定義