更改输入的输入值，而不影响更改侦听器

Changing input value on input, without affecting change listener?

本文关键字：输入 影响 侦听器      更新时间：2023-09-26

我有一个文本输入。它具有change和input侦听器。在input侦听器中，如果输入的值为"delete"，则删除该值。change侦听器只是简单地提醒"Changed"。

当前行为：

当我键入"delete"并停止编辑时，没有"Changed."警报，因为比较基数也发生了更改。

期望行为：

我希望看到基于编辑开始时的值的"更改"警报，忽略修改过程中所做的所有程序更改。

做这件事最简单的方法是什么？

Playgorund:

  1. 单击输入
  2. 删除内容
  3. 键入"delete"
  4. 查看如何删除文本
  5. 单击其他位置
  6. 查看"Changed."警报是如何而不是显示的

var input = document.querySelector('input');
input.addEventListener('change', function() {
  alert('Changed.');
});
input.addEventListener('input', function() {
  input.value = input.value.replace(/^delete$/, '');
});
<input value="example" />

我当前的解决方案是在每个focus事件中添加一个存储初始值的属性，并将其与blur事件时的当前值进行比较。

var input = document.querySelector('input');
input.addEventListener('focus', function() {
  this.setAttribute('data-value-on-focus', this.value);
});
input.addEventListener('blur', function() {
  if (this.getAttribute('data-value-on-focus') !== this.value) alert('Changed.');
});
input.addEventListener('input', function() {
  this.value = this.value.replace(/^delete$/, '');
});
<input value="example" />

相关文章：