oninput - evento onChange para rango HTML5

oninput jquery

Question

Actualmente, el evento onChange en mis entradas de rango se activa en cada paso.

¿Hay alguna manera de evitar que este evento se active hasta que el usuario haya soltado el control deslizante?

Estoy usando el rango para crear una consulta de búsqueda. Quiero poder ejecutar la búsqueda cada vez que se cambia el formulario, pero emitir una solicitud de búsqueda en cada paso del movimiento del control deslizante es demasiado.

Aquí está el código tal como está:

HTML:

<div id="page">
<p>Currently viewing page <span>1</span>.</p>
<input class="slider" type="range" min="1" max="100" step="1" value="1" name="page" />
</div>

JavaScript:

$(".slider").change(function() {
$("#query").text($("form").serialize());
});

¿Eso ayuda?

Answer 1

¡Bah!

Utilice el evento onmouseup En lugar de onChange

Answer 2

Esto es lo que uso para capturar el ''evento de cambio'' para el control deslizante de la gama html5:

HTML:

<form oninput="output1.value=slider1.value">
<input type="range" name="slider1" value="50"/>
<output name="output1" for="slider1">50</output>
</form>

JavaScript:

var $slider = $(''input[name="slider1"]'');
$slider.bind(''change'', function(e) {
e.preventDefault();
console.log($(this).val());
});

También puede vincular el evento ''clic'' al control deslizante de rango si desea devolver su valor cuando se ha hecho clic (o incluso arrastrado). Piense en ello como un evento ''mouseup''. (Lo intenté pero el control deslizante no se detuvo después de haber hecho clic en el control deslizante).

JavaScript:

$slider.bind(''click'', function(e) {
e.preventDefault();
console.log($this).val());
}

En una nota lateral, esto devuelve una cadena, así que asegúrese de utilizar ''parseInt ($ (this) .value ())'' cuando corresponda.

Espero que esto ayude.

Answer 3

Puede intentar utilizar el evento blur . Por supuesto, también tiene sus limitaciones, pero es solo otra sugerencia :)

También puede intentar combinar los eventos blur , onkeyup y onmouseup para tratar de atrapar diferentes situaciones: blur cuando el usuario hace la selección con las flechas del teclado y éxitos <Tab> , onkeyup cuando el usuario realiza las selecciones con el teclado y permanece enfocado en el control deslizante y onmouseup cuando usa el mouse. Incluso podría ser posible combinar solo onkeyup y onmouseup .

Sin embargo, tendrá que hacer una simple comprobación si el valor ha cambiado o no y ejecutar el código necesario solo después de que se produzca un cambio.

Answer 4

Pure JS aquí:

myInput.oninput = function(){
console.log(this.value);
}

o

myInput.onchange = function(){
console.log(this.value);
}

Answer 5

Un poco tarde, pero tuve el mismo problema el otro día. Aquí está mi solución usando jQuery bind / trigger:

(function(el, timeout) {
var timer, trig=function() { el.trigger("changed"); };
el.bind("change", function() {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(trig, timeout);
});
})($(".slider"), 500);

Ahora solo une tu función al evento ''cambiado''.

Answer 6

Un problema es que AFAIK, el HTML5, no define cuándo se supone que el evento onchange se onchange , por lo que es muy probable que sea diferente de un navegador a otro. Y también debe tener en cuenta que un navegador no tiene que representar un input type=range como control deslizante.

Su única opción es que tenga que crear un mecanismo para asegurarse de que su búsqueda no se active con demasiada frecuencia; por ejemplo, verifique si actualmente se está ejecutando una búsqueda y abortar si es así, o asegúrese de que las búsquedas se desencadenen a máximo de cada x segundos.

Ejemplo rápido para este último (solo un truco rápido, no probado).

var doSearch = false;
function runSearch() {
// execute your search here
}
setInterval(function() {
if (doSearch) {
doSearch = false;
runSearch();
}
}, 2000); // 2000ms between each search.
yourRangeInputElement.onchange = function() { doSearch = true; }

Answer 7

Usar para el valor final seleccionado:

 $(".slider").on("change", function(){console.log(this.value)});

Use para obtener un valor incremental como deslizante:

$(".slider").on("input", function(){console.log(this.value)});

Answer 8

Uso varios controles deslizantes predeterminados de HTML5 en la misma página con la siguiente configuración:

• La etiqueta de salida en la página cambia de valor cuando se mueve el control deslizante usando el evento oninput
• Un evento de change se desencadena una vez en el lanzamiento

Probado con el último Chrome y compila bien en una frambuesa con Node y Socket.io.

<output id="APIDConKpVal"></output>&nbsp; <input type="range"
class="PIDControlSlider"
min="0"
max="1500"
step="1"
id="APIDConKp"
oninput="APIDConKpVal.value=value"/>
<output id="APIDConKiVal"></output>&nbsp; <input type="range"
class="PIDControlSlider"
min="0"
max="2000"
step="1"
id="APIDConKi"
oninput="APIDConKiVal.value=value"/>

Un código JavaScript simple crea los oyentes. Es posible que deba probar diferentes eventos en lugar de ''cambiar'' en la última línea para ver qué le queda bien.

window.onload=function()
{
var classname = document.getElementsByClassName("PIDControlSlider");
var myFunction = function() {
var attribute = this.getAttribute("id");
//Your code goes here
socket.emit(''SCMD'', this.getAttribute("id")+'' ''+ this.value);
};
for(var i=0;i<classname.length;i++){
classname[i].addEventListener(''change'', myFunction, false);
}
}

Answer 9

gravediggin, pero si lo necesita, revise las funciones js throttle o rebote

Uso:

//resize events gets processed 500ms after the last Event
addEventListener("resize", _debounce(function(){ foo;}, 500));
//resize events get processed every 500ms
addEventListener("resize", _throttle(function(){ foo;}, 500));

Código:

/*waits ''delay'' time after the last event to fire */
_debounce = function(fn, delay) {
var timer = null;
return function() {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
};
};
/* triggers every ''treshhold'' ms, */
_throttle = function(fn, threshhold, scope) {
threshhold = threshhold || 250;
var last,
deferTimer;
return function() {
var context = scope || this;
var now = +new Date(),
args = arguments;
if (last && now < last + threshhold) {
// hold on to it
clearTimeout(deferTimer);
deferTimer = setTimeout(function() {
last = now;
fn.apply(context, args);
}, threshhold);
} else {
last = now;
fn.apply(context, args);
}
};
};

Answer 10

onchange funciona bien, pero necesitaba actualizar el valor mientras lo deslizaba.

var interval;
$("#rangeinput").mousedown(function(event){
interval = setInterval(function(){
$("#output").html($("#rangeinput").val());
console.log("running");
},150);
});
$("#rangeinput").mouseup(function(event){
clearInterval(interval);
});

http://jsbin.com/vibuc/1/

Answer 11

otro sugiere:

$(".slider").change(function(){
if (this.sliderTimeour) clearTimeout(this.sliderTimeour);
this.sliderTimeour = setTimeout(function(){
//your code here
},delayTimeHere);
});