是否可以觸發HTML5輸入滑塊的oninput事件?

[英]Is it possible to fire the oninput event for HTML5 input sliders?


I've got a HTML5 input slider that I'm changing via JavaScript (in my example I'm changing it with a jquery UI slider, but it's possible it could also be changed due to other user input, e.g. click this button for 1x, 2x zoom, etc.)

我有一個HTML5輸入滑塊,我正在通過JavaScript進行更改(在我的示例中,我使用jquery UI滑塊更改它,但它可能也會因其他用戶輸入而更改,例如單擊此按鈕1x ,2倍變焦等)

The slider has the oninput event attached to it, so that when the user changes the slider value, it then updates the user interface.

滑塊附加了oninput事件,因此當用戶更改滑塊值時,它會更新用戶界面。

The problem is, that changing the value via JavaScript doesn't fire the oninput event, I've tried doing rangeInputRaw.oninput() which apparently works for textarea's but it just throws an error on the range input.

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

Here's an example of what I'm talking about:

這是我正在談論的一個例子:

http://jsfiddle.net/qc03cumt/1/

http://jsfiddle.net/qc03cumt/1/

(if you slider the jQuery UI slider, you'll see the top HTML slider changing, but the value for it doesn't update, if you slide the HTML slider however, the value does update)

(如果您滑動jQuery UI滑塊,您將看到頂部的HTML滑塊更改,但它的值不會更新,但是如果滑動HTML滑塊,則值會更新)

For future reference, the HTML looks like this:

為了將來參考,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>

And the JavaScript looks like this:

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;
})

As stated, the example uses jQuery UI, but it's also feasible you'd want to change the range input value on other user interactions, e.g. changing another form value or clicking a button.

如上所述,該示例使用jQuery UI,但您也希望更改其他用戶交互的范圍輸入值,例如:更改另一個表單值或單擊按鈕。

I can't change the event listener from oninput to onchange as it needs to update incrementally, not when the user has finished their interaction.

我不能將事件監聽器從oninput更改為onchange,因為它需要以遞增方式更新,而不是在用戶完成交互時。

2 个解决方案

#1


3  

If you don't mind changing "addEventListener" to "onInput = function" then check this link

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

#2


1  

It seems to work with jQuery events:

它似乎適用於jQuery事件:

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

...

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

UPDATE:

更新:

Here is the complete HTML page (without jQuery UI):

這是完整的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>

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/04/09/72029a11ee6ef27d077b271166cc742d.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com