是否可以為HTML5輸入滑塊觸發oninput事件？

Question

我有一個HTML5輸入滑塊，可以通過JavaScript進行更改（在我的示例中，我是使用jquery UI滑塊對其進行更改的，但是由於其他用戶的輸入，它也可能會更改，例如單擊此按鈕1倍），2倍變焦等）

滑塊具有附加的oninput事件，因此，當用戶更改滑塊值時，它將隨后更新用戶界面。

問題是，通過JavaScript更改值不會觸發oninput事件，我嘗試做rangeInputRaw.oninput()顯然適用於textarea的方法，但它只是在范圍輸入上引發錯誤。

這是我正在談論的示例：

（如果滑動jQuery UI滑動器，則會看到頂部的HTML滑動器發生變化，但是其值不會更新；如果滑動HTML滑動器，則該值會更新）

為了將來參考，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”，請檢查此鏈接

$("#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 個解決方案

解決方案1
3 已采納 2015-04-09 10:33:02

解決方案2
1 2015-04-09 10:28:50

是否可以為HTML5輸入滑塊觸發oninput事件？

問題描述

2 個解決方案

解決方案1 3 已采納 2015-04-09 10:33:02

解決方案2 1 2015-04-09 10:28:50

解決方案1
3 已采納 2015-04-09 10:33:02

解決方案2
1 2015-04-09 10:28:50