我想给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` 获取当前输入框中的值，并进行相应的处理。在这里，我只是简单地在控制台输出了这个值。

相关问题

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()`函数用于移除字符串两端的空白字符，确保空字符串和只包含空格的区别。

vue3,监听input , 聚焦，失焦

在Vue3中，监听`input`、聚焦(`focus`)和失焦(`blur`)事件通常涉及到处理用户输入以及元素状态的变化。以下是如何在组件中实现这几个事件的简单示例：

1. 监听`input`事件：
当用户在指定的`<input>`标签内输入内容时，可以在对应的`data`或`methods`里添加`v-model`指令，并监听`input`事件。例如：

<input type="text" v-model="value" @input="handleInputChange">

// methods部分
methods: {
  handleInputChange(e) {
    console.log('输入值变化：', e.target.value);
  }
}

2. 监听聚焦和失焦事件：
使用自定义的事件处理器或者直接在HTML上绑定原生事件也可以做到：

<input type="text" ref="myInput" @focus="onFocus" @blur="onBlur">

// methods部分
methods: {
  onFocus() {
    console.log('输入框聚焦');
  },
  onBlur() {
    console.log('输入框失去焦点');
  }
}

// 或者使用ref并使用 watch 或 computed 来监听变化
export default {
  setup(props, { onMounted }) {
    const input = ref(null);

    onMounted(() => {
      input.value.addEventListener('focus', () => this.onFocus());
      input.value.addEventListener('blur', () => this.onBlur());
    });

    return {
      input,
      onFocus: () => {
        console.log('聚焦');
      },
      onBlur: () => {
        console.log('失焦');
      }
    };
  }
}