JavaScript输入框文本变更即时调用函数及Vue表单输入事件问题

让我来分别解答这两个问题：

你可以使用input事件来实现这个需求——这个事件会在输入框的内容每一次发生变化时立刻触发，不管是通过键盘输入、粘贴文本还是拖拽内容进去，都能即时响应。

举个简单的实现示例：

<input type="text" id="myInput">
<script>
  const inputElement = document.getElementById('myInput');
  inputElement.addEventListener('input', function() {
    console.log('当前输入内容:', this.value);
    // 在这里调用你需要执行的业务函数
  });
</script>

如果需要兼容IE9及以下这类老旧浏览器，可以额外监听propertychange事件，但现在绝大多数现代浏览器只需要input事件就足够覆盖所有即时输入场景了。

你遇到的问题是因为change事件的特性就是只有当输入框失焦时才会触发，要实现文本变化即时响应，只需要把绑定的事件换成input即可：

<input type="text" v-model="test" @input="setMessage">

@input是v-on:input的简写语法，它会在输入框内容每一次更新时立刻调用setMessage函数，完美匹配你想要的即时触发效果。

额外补充：Vue的v-model本身就是语法糖，它默认就是通过绑定input事件来实现数据双向同步的，所以搭配@input使用，既能保持数据的双向绑定，又能在文本变化时立刻执行自定义逻辑。

内容的提问来源于stack exchange，提问作者Ciasto piekarz