Question

我有一个HTML5输入滑块，我通过JavaScript进行更改（在我的示例中，我用jquery UI滑块更改它，但它可能也可能是由于其他用户输入而改变，例如单击此按钮进行1倍，2倍缩放等）。

滑块附加了oninput事件，因此当用户更改滑块值时，它会更新用户界面。

问题是，通过JavaScript更改值并不会触发oninput事件，我已尝试执行rangeInputRaw.oninput()，这显然适用于textarea＆＃ 39;但它只会在范围输入上引发错误。

以下是我所谈论的一个例子：

（如果您滑动jQuery UI滑块，您会看到顶部的HTML滑块更改，但它的值不会更新，但是如果您滑动HTML滑块，则值会更新）< / p>

为了将来参考，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，因为它需要逐步更新，而不是在用户完成交互时。

Answer 1

如果您不介意将“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;
};

Answer 2

它似乎适用于jQuery事件：

$("#range-input").on("input", function(e) {
    console.log("change");
    rangeInputOutput.innerHTML = this.value;
});

...

htmlRange.val(66);
htmlRange.trigger("input");

更新：

这是完整的HTML页面（没有jQuery UI）：

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/libs/jquery/jquery.js"></script>
    </head>
    <body>
        <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" />

            <input type="button" id="change" value="Change">
        </form>
        <script type="text/javascript">
        var htmlRange = $("#range-input");

        $("#change").on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            htmlRange.val(66);
            htmlRange.trigger("input");
        });
        var rangeInputOutput = document.getElementById("range-current-value");
        $("#range-input").on("input", function(e) {
            console.log("change");
            rangeInputOutput.innerHTML = this.value;
        });
        </script>
    </body>
</html>

是否可以触发HTML5输入滑块的oninput事件？

2 个答案: