删除 input 框的内容时不触发 blur 事件
时间: 2024-05-04 14:16:48 浏览: 8
可以通过监听 input 的 `input` 事件来实现这个功能。`input` 事件在输入框的内容发生变化时触发,但不会在输入框失去焦点时触发。你可以在 `input` 事件中处理输入框内容的变化,而不用担心触发 `blur` 事件。以下是一个示例代码:
```html
<input id="myInput" type="text">
<script>
const input = document.getElementById('myInput');
input.addEventListener('input', () => {
// 处理输入框内容的变化
});
input.addEventListener('blur', () => {
// 处理输入框失去焦点的事件
});
</script>
```
相关问题
el-input中clear如何不触发click事件
要实现在el-input中点击清除按钮不触发click事件,可以使用以下方法:
1. 使用 @mousedown.prevent 替代 @click 事件来禁止默认行为。如下所示:
```html
<el-input v-model="input" clearable @mousedown.prevent="clearInput"></el-input>
```
```javascript
methods: {
clearInput() {
this.input = '';
}
}
```
2. 在方法中使用 $refs 获取清除按钮元素,并使用 .blur() 方法使其失去焦点。如下所示:
```html
<el-input v-model="input" clearable @click="clearInput"></el-input>
```
```javascript
methods: {
clearInput() {
this.$refs.input.$refs.clearable.blur();
this.input = '';
}
}
```
这样就可以实现在点击清除按钮时不触发click事件。
vue input 输入后触发blur
在 Vue 中,可以通过 `v-on:blur` 或 `@blur` 绑定事件监听 input 的 blur 事件,然后在事件处理函数中执行相应的操作。例如:
```html
<template>
<div>
<input type="text" v-model="inputValue" @blur="handleBlur">
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleBlur() {
console.log('input blur');
// 执行相应的操作
}
}
};
</script>
```
当输入框失去焦点时,会触发 `handleBlur` 方法,并执行其中的操作。