Возможно ли запустить событие oninput для ползунков ввода HTML5?

У меня есть ползунок ввода HTML5, который я меняю с помощью JavaScript (в моем примере я меняю его с помощью слайдера пользовательского интерфейса jquery, но возможно его также можно изменить из-за другого ввода пользователя, например, нажмите эту кнопку для 1x, 2x зума и т. д.)Возможно ли запустить событие oninput для ползунков ввода HTML5?

Слайдер имеет прикрепленное к нему событие oninput, так что когда пользователь меняет значение ползунка, он обновляет пользовательский интерфейс.

Проблема заключается в том, что изменение значения с помощью JavaScript не сгореть oninput событие, я пытался делать rangeInputRaw.oninput(), который, по-видимому работает для textarea-х, но он просто выдает ошибку на входе диапазона.

Вот пример того, что я говорю о:

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

(если ползунок ползунок 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, так как он должен обновляться постепенно, а не тогда, когда пользователь завершил свое взаимодействие.

источник

2015-04-09 Sean

Это не решение ... но в качестве исправления вы можете просто поместить именованную функцию как обработчик событий, а не анонимно, и вызвать эту функцию. И я проверю, почему эта проблема происходит? и имеет любое лучшее решение? –

Спасибо Vinod, это потенциальное решение, к сожалению, хотя мне пришлось бы изменить внешнюю JS-библиотеку, чтобы сделать эту работу (что не идеально), поэтому я очень хочу избежать этого решения, если это вообще возможно. – Sean

Если вы не возражаете, чтобы сменить addEventListener на onInput = function, то проверьте это http://jsfiddle.net/qc03cumt/3/ –

Если вы не возражаете изменение «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; 
};

источник

2015-04-09 10:33:02

Это похоже на работу с JQuery событий:

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

... 

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

UPDATE:

Вот полный 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>

источник

2015-04-09 10:28:50

Я не думаю, что ваш ответ верен, по крайней мере, я не могу заставить его работать: http: // jsfiddle.net/n7jj3x2f/ – Sean

@SeanDunwoody попробуйте с полной страницей, которую я только что опубликовал (настройте jquery src, чтобы он соответствовал вашей среде) –

Возможно ли запустить событие oninput для ползунков ввода HTML5?

ответ

Смежные вопросы