我有一个 HTML5 输入 slider ,我正在通过 JavaScript 更改它(在我的示例中,我正在使用 jquery UI slider 更改它,但它也可能由于其他用户输入而更改,例如单击此用于 1 倍、2 倍缩放等的按钮)
slider 有 oninput
事件附加到它,因此当用户更改 slider 值时,它会更新用户界面。
问题是,通过 JavaScript 更改值不会触发 oninput
事件,我已经尝试执行 rangeInputRaw.oninput()
这显然适用于 textarea
但它只会在范围输入上引发错误。
这是我正在谈论的例子:
http://jsfiddle.net/qc03cumt/1/
(如果您滑动 jQuery UI slider ,您会看到顶部的 HTML slider 发生变化,但它的值不会更新,但是如果您滑动 HTML slider ,该值会更新)
为了将来引用,HTML 如下所示:
<h1>Range Slider</h1>
<form action="">
<p>Range current value <span id="range-current-value">N/A</span></p>
<input type="range" min="0" max="100" class="range-input" id="range-input" />
<p>Current value: <span id="currrent-value">N/A</span></p>
<div class="slider" id="slider"></div>
</form>
JavaScript 看起来像这样:
var currentValue = $("#currrent-value");
var htmlRange = $("#range-input");
var htmlRangeRaw = document.getElementById("range-input");
$("#slider").slider({
min: 0,
max: 100,
slide: function(event, ui) {
currentValue.html(ui.value);
htmlRange.val(ui.value);
}
});
var rangeInputRaw = document.getElementById("range-input");
var rangeInputOutput = document.getElementById("range-current-value");
rangeInputRaw.addEventListener("input", function(event) {
console.log("change");
rangeInputOutput.innerHTML = this.value;
})
如前所述,该示例使用 jQuery UI,但您也可以在其他用户交互中更改范围输入值,例如更改另一个表单值或单击按钮。
我无法将事件监听器从 oninput
更改为 onchange
,因为它需要增量更新,而不是在用户完成交互时更新。
请您参考如下方法:
如果您不介意将“addEventListener”更改为“onInput = function”,请检查this link
$("#slider").slider({
min: 0,
max: 100,
slide: function(event, ui) {
currentValue.html(ui.value);
htmlRange.val(ui.value);
htmlRange[0].onInput();
}
});
....
rangeInputRaw.onInput = function(event) {
console.log("change");
rangeInputOutput.innerHTML = this.value;
};