我有一个 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; 
}; 


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!