是否可以触发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>
智能推荐

注意!

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



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

赞助商广告