我可以跟踪一次对输入字段的文本更改，而不是每次输入吗?

Question

我有一个基本的文本输入字段，出于数据分析目的，我想跟踪用户每次编辑该字段中的文本。到目前为止，我有这段代码：

var input = document.querySelector("#inputId");
input.oninput = function (e) {
alert("changed"); 
}

问题是每次用户删除或添加字符时都会触发此操作，而我只想知道一次他们正在更改文本字段中的文本。有没有办法实现这一目标？我是jQuery和JavaScript的新手，所以任何方向都将不胜感激，谢谢！

Answer 1

您可以尝试使用参数选项once: true：

once：一个布尔值，指示侦听器在添加后最多应调用一次。如果true，则侦听器将在调用时自动删除。

请注意：IE浏览器尚未支持此参数特性。

var input = document.querySelector("#inputId");
input.addEventListener('input', () => {
alert("changed"); 
}, {
once: true
});

<input id="inputId"/>

Answer 2

如果只希望事件处理程序为每个元素触发一次，则需要在事件处理程序首次运行时将其删除：

var input = document.querySelector("#inputId");
input.addEventListener('input', yourFunc);
function yourFunc(e) {
alert("changed");
this.removeEventListener('input', yourFunc);
}

请注意使用addEventListener()和removeEventListener()而不是过时的oninput属性。

由于您在问题中标记了 jQuery，因此您也可以通过以下方式实现它，使用one()：

$('#inputId').one('input', function() {
alert('changed');
});

Answer 3

听起来你想绑定到onchange事件：当用户"最终确定"输入值时，例如，当他/她从字段中模糊时，它会触发：

var input = document.querySelector("#inputId");
input.addEventListener('change', (e) => console.log('changed', e.target.value));

<input type="text" id="inputId" />

Answer 4

只需在调用函数时删除函数

let input = document.querySelector("#inputId");
input.oninput = function (e) {
alert("changed");
input.oninput = undefined;
}

<input id="inputId">