2019.01.11今天在做一个搜索功能时发现,输入搜索字后点击搜索按钮没问题,但是按下enter键页面就刷新了一下,我就纳闷了,为啥之前写的都没有问题,就这里不能enter搜索,难道是因为前端搜索就不行?那也没道理啊,最终才发现:原来是因为,当<form>
表单中只有一个输入框时enter键会执行表单的默认提交事件并刷新页面。
解决办法:
- 处理表单的默认行为
<form onsubmit="return false;">.......</form>
- 如果你的表单时集成的框架,不能在表单标签上直接禁止它的默认行为的话,可以在表单中再写一个输入框并将其隐藏
<form-group> <el-input clearable v-model="tableInit.searchKey" class="front-search-input" icon="h-icon-search" :placeholder="$t('s.searchMonitor')" :on-icon-click="searchTable" @keyup.enter.native="searchTable" :clear-icon-click="clearSearchTable"> </el-input> <el-input style="display: none;"></el-input> </form-group>
- 当然也可以直接屏蔽回车键
<input type="text" onkeydown="return ClearSubmit(event)" /> function ClearSubmit(e) { if (e.keyCode == 13) { return false; } }