表單只有一項 input 時按回車鍵會提交表單

在 Vue 中 使用 Element UI,使用表單  el-form 只有一個  el-input  項,使用  @keyup.enter.native 來處理回車事件。

 

結果發現按下回車時頁面總會被刷新??

 

第一反應查詢關鍵字 vue、 element、 el-form ……

 

結果發現是 HTML 的已知 bug(feature)……

https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2

 

 

好吧 那怎麼解決呢

 

1. 加一個表單項 不顯示就可以了。使用  <input type="hidden"> 是不行的 要用  <input type="text" style="display:none"> 

2. 阻止 submit 事件刷新頁面  <form method="post" onsubmit="return false;"> 

在 Vue 中 <form v-on:submit.prevent="onSubmit"></form> 

在 Element 中  <el-form @submit.native.prevent></el-form> 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章