我想给input框用addEventListener添加onblur事件 然后onblur绑定一个事件 事件传当前值

好的，你可以这样写：

const input = document.querySelector('input');

input.addEventListener('blur', function() {
  const value = input.value;
  // 在这里可以对输入的值进行处理
  console.log(value);
});

在上面的代码中，我们通过 `querySelector` 方法获取了一个 `input` 元素，并使用 `addEventListener` 方法添加了 `blur` 事件。当输入框失去焦点时，会触发这个事件，并执行事件处理函数。在事件处理函数中，我们可以通过 `input.value` 获取当前输入框中的值，并进行相应的处理。在这里，我只是简单地在控制台输出了这个值。

相关问题

vue input失去焦点事件onblur

### 如何在 Vue 中使用 Input 的 OnBlur 失去焦点事件

#### 使用 `v-on` 绑定 Blur 事件

在 Vue.js 中，可以利用 `v-on` 指令来绑定原生 DOM 事件。对于处理输入框失去焦点的情况，通常会采用 `blur` 或者自定义修饰符的形式。

当 `<input>` 元素失去焦点时，将会触发相应的处理器函数：

<template>
  <div id="app">
    <!-- 绑定 blur 事件 -->
    <input type="text" v-model="message" @blur="handleBlurEvent"/>
    <p>Message is: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleBlurEvent(event) {
      console.log('Input has lost focus', event.target.value);
      // 可在此处执行其他逻辑操作
    }
  }
}
</script>

此方法允许开发者监听到输入框失焦的行为并作出响应[^1]。

#### 解决表单输入框不支持 Focus 和 Blur 事件的问题

如果遇到某些情况下无法正常工作的问题，则可能是因为框架版本差异或其他原因造成的兼容性问题。一种解决办法是在组件挂载之后通过 JavaScript 手动添加这些事件监听器:

mounted () {
  this.$nextTick(() => {
    const el = document.querySelector('#special-input')
    if (el) {
      el.addEventListener('focus', this.handleFocus)
      el.addEventListener('blur', this.handleBlur)
    }
  })
},
beforeDestroy () {
  const el = document.querySelector('#special-input')
  if (el) {
    el.removeEventListener('focus', this.handleFocus)
    el.removeEventListener('blur', this.handleBlur)
  }
}

这种方法绕过了潜在的模板解析限制，并确保即使在特殊场景下也能正确注册所需的事件处理器[^2]。

#### 防止 Input 内容丢失

有时，在设置或更新状态变量的同时可能会意外清除掉原始值。为了避免这种情况发生，可以在修改数据前先保存当前值作为临时副本；或者调整业务逻辑使得每次变更都基于最新用户输入而不是重置整个字段的内容[^3]:

methods: {
  handleBlurEvent(event){
    let currentValue = event.target.value;
    // 基于currentValue做进一步处理而不影响model绑定的数据源
  }
}

js中为元素绑定获取焦点事件onfocus和失去焦点事件onblur，如果获取焦点时，需要判断表单里面的内容是否为文字；如果是默认文字，就清空表单内容，如果失去焦点，需要判断表单内容是否为空，如果为空，则表单里边的内容改为默认文字

在JavaScript中，你可以使用`addEventListener`方法为元素添加`focus`和`blur`事件监听器。对于这个需求，你需要在元素聚焦(`onfocus`)和失焦(`onblur`)的时候检查表单内容。以下是一个简单的实现示例：

// 假设inputElement是你要监控的输入字段
var inputElement = document.getElementById('myInputField');

// 绑定聚焦事件
inputElement.addEventListener('focus', function(event) {
  if (event.target.value === '' || event.target.value.trim() === '') { // 判断是否为空或只有空白字符
    event.target.value = ''; // 清空表单内容
  }
});

// 绑定失焦事件
inputElement.addEventListener('blur', function(event) {
  if (event.target.value.length === 0) { // 判断内容长度是否为0
    event.target.value = '默认文字'; // 设置默认文字
  }
});

在这个代码中，`value`属性用于获取和设置输入字段的内容。`trim()`函数用于移除字符串两端的空白字符，确保空字符串和只包含空格的区别。