本文解决问题
1、ElementUI el-input 点击回车会导致页面刷新，输入内容丢失； 2、el-button点击后，再次按回车会重复触发； 3、如何实现多个输入框回车触发同一个事件
1、问题原因：
W3C 标准中有如下规定：
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。
解决办法：
可以在 标签上添加 @submit.native.prevent。
.native 表示对一个组件绑定系统原生事件 .prevent 表示阻止浏览器的默认事件
2、问题原因：
el-button点击不会自动失去焦点，所以这个时候按下回车会再次触发按钮绑定的事件
解决办法：
searchAction(e) {
......
......
/// 获取对象
let target = e.target
if (target.nodeName === 'SPAN' || target.nodeName === 'I') {
target = e.target.parentNode;
}
// 让其失去焦点
target.blur();
}
3、如何在完成某个输入后，键盘回车自动触发查询事件？
解决办法：使用按键修饰符
const handleQuery = ()=> {
console.log('handleQuery')
}
4、多个输入框，如何实现输入后回车调用事件？
场景：比如通过条件查询个人信息，输入选项有：身高，年龄，班级…
可以多个条件叠加在一起，也可以只输入某一项，但无论输入那个输入框，只要回车都需要去做查询
解决办法一：可以使用问题3，但如果输入框特别多，改动就很大，就很麻烦
解决办法二：使用 配合
原代码
/// 修改el-form，把el-button的@click事件onSearch绑定上
/// 修改el-button的@click事件，将其删除，并新增native-type="submit"
这样每一个输入框enter事件都会触发onSearch()方法
精彩内容
您阅读本篇文章共花了：
发表评论