javascript - valor - onchange

Detecte todos los cambios en un<input type=“text”>(inmediatamente) usando JQuery

Question

Hay muchas maneras en que puede cambiar el valor de un <input type="text"> , incluyendo:

• pulsaciones de teclas
• copiar pegar
• modificado con JavaScript
• completado automáticamente por el navegador o una barra de herramientas

Quiero que se llame a mi función JavaScript (con el valor de entrada actual) cada vez que cambie. Y quiero que se llame de inmediato, no solo cuando la entrada pierde el enfoque.

Estoy buscando la forma más limpia y robusta de hacer esto en todos los navegadores (preferiblemente utilizando jQuery).

Ejemplo de caso de uso: en la página de registro de Twitter , el valor del campo de nombre de usuario se muestra en la url " http://twitter/ username " debajo de él.

Answer 1

¿No puedes usar el elemento <span contenteditable="true" spellcheck="false"> en lugar de <input type="text"> ?

<span> (con contenteditable="true" spellcheck="false" como atributos) se distingue por <input> principalmente porque:

• No tiene el estilo de una <input> .
• No tiene una propiedad de value , pero el texto se representa como texto innerText y forma parte de su cuerpo interno.
• Es multilínea, mientras que <input> no lo es, aunque establezca el atributo multiline="true" .

Para lograr la apariencia, puede, por supuesto, innerText en CSS, mientras que escribir el valor como innerText puede obtener un evento:

Aquí hay un fiddle .

Desafortunadamente, hay algo que realmente no funciona en IE y Edge, que no puedo encontrar.

Answer 2

Agrega este código en alguna parte, esto hará el truco.

var originalVal = $.fn.val;
$.fn.val = function(){
var result =originalVal.apply(this,arguments);
if(arguments.length>0)
$(this).change(); // OR with custom event $(this).trigger(''value-changed'');
return result;
};

Encontré esta solución en val () no desencadena el cambio () en jQuery

Answer 3

Aquí hay una solución ligeramente diferente si no te gustó ninguna de las otras respuestas:

var field_selectors = ["#a", "#b"];
setInterval(function() {
$.each(field_selectors, function() {
var input = $(this);
var old = input.attr("data-old-value");
var current = input.val();
if (old !== current) {
if (typeof old != ''undefined'') {
... your code ...
}
input.attr("data-old-value", current);
}
}
}, 500);

Tenga en cuenta que no puede confiar en hacer clic y pulsar para capturar el menú contextual.

Answer 4

Bueno, la mejor manera es cubrir esas tres bases que enumeró usted mismo. Un simple: onblur,: onkeyup, etc. no funcionará para lo que desea, así que simplemente combínelos.

KeyUp debería cubrir los dos primeros, y si Javascript está modificando el cuadro de entrada, bueno, espero que sea tu propio javascript, así que solo agrega una devolución de llamada en la función que lo modifica.

Answer 5

Desafortunadamente, creo que setInterval gana el premio:

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($(''#input_id'').val()); }, 100);
</script>

Es la solución más limpia, con solo 1 línea de código. También es el más robusto, ya que no tiene que preocuparse por todos los diferentes eventos / formas en que una input puede obtener un valor.

Las desventajas de usar ''setInterval'' no parecen aplicarse en este caso:

• ¿La latencia de 100ms? Para muchas aplicaciones, 100ms es lo suficientemente rápido.
• ¿Carga añadida en el navegador? En general, agregar un montón de setIntervals pesados ​​en tu página es malo. Pero en este caso particular, la carga de la página agregada es indetectable.
• ¿No se escala a muchas entradas? La mayoría de las páginas no tienen más que un puñado de entradas, que puede rastrear todas en el mismo valor de intervalo.

Answer 6

Desafortunadamente, no hay ningún evento o conjunto de eventos que coincida con sus criterios. Las pulsaciones de tecla y copiar / pegar se pueden manejar con el evento keyup . Los cambios a través de JS son más complicados. Si tiene control sobre el código que establece el cuadro de texto, lo mejor es modificarlo para que llame directamente a su función o active un evento de usuario en el cuadro de texto:

// Compare the textbox''s current and last value. Report a change to the console.
function watchTextbox() {
var txtInput = $(''#txtInput'');
var lastValue = txtInput.data(''lastValue'');
var currentValue = txtInput.val();
if (lastValue != currentValue) {
console.log(''Value changed from '' + lastValue + '' to '' + currentValue);
txtInput.data(''lastValue'', currentValue);
}
}
// Record the initial value of the textbox.
$(''#txtInput'').data(''lastValue'', $(''#txtInput'').val());
// Bind to the keypress and user-defined set event.
$(''#txtInput'').bind(''keypress set'', null, watchTextbox);
// Example of JS code triggering the user event
$(''#btnSetText'').click(function (ev) {
$(''#txtInput'').val(''abc def'').trigger(''set'');
});

Si no tiene control sobre ese código, puede usar setInterval() para "ver" el cuadro de texto en busca de cambios:

// Check the textbox every 100 milliseconds. This seems to be pretty responsive.
setInterval(watchTextbox, 100);

Este tipo de monitoreo activo no detectará las actualizaciones ''inmediatamente'', pero parece ser lo suficientemente rápido como para que no haya un retraso perceptible. Como DrLouie señaló en los comentarios, esta solución probablemente no se adapte bien si necesita ver muchas entradas. Siempre puede ajustar el segundo parámetro para establecer setInterval() para verificar con mayor o menor frecuencia.

Answer 7

En realidad no necesitamos configurar bucles para detectar cambios en JavaScript. Ya estamos configurando muchos oyentes de eventos para el elemento que queremos detectar. solo activando cualquier evento dañino hará que el trabajo.

$("input[name=''test-element'']").on("propertychange change click keyup input paste blur", function(){
console.log("yeh thats worked!");
});
$("input[name=''test-element'']").val("test").trigger("blur");

y, por lo tanto, esto solo está disponible si tiene el control total sobre los cambios de javascript en su proyecto.

Answer 8

Esta es la forma más rápida y limpia de hacer eso:

Estoy usando Jquery ->

$(''selector'').on(''change'', function () {
console.log(this.id+": "+ this.value);
});

Está funcionando bastante bien para mí.

Answer 9

Este código de jQuery detecta cambios inmediatos en cualquier elemento y debería funcionar en todos los navegadores:

 $(''.myElements'').each(function() {
var elem = $(this);
// Save current value of element
elem.data(''oldVal'', elem.val());
// Look for changes in the value
elem.bind("propertychange change click keyup input paste", function(event){
// If value has changed...
if (elem.data(''oldVal'') != elem.val()) {
// Updated stored value
elem.data(''oldVal'', elem.val());
// Do action
....
}
});
});

Answer 10

Este es un ejemplo práctico que estoy usando para implementar una variación de autocompletar, llena un selector de jqueryui (lista), pero no quiero que funcione exactamente como el autocompletado de jqueryui que hace un menú desplegable.

$("#tagFilter").on("change keyup paste", function() {
var filterText = $("#tagFilter").val();
$("#tags").empty();
$.getJSON("http://localhost/cgi-bin/tags.php?term=" + filterText,
function(data) {
var i;
for (i = 0; i < data.length; i++) {
var tag = data[i].value;
$("#tags").append("<li class=/"tag/">" + tag + "</li>");
}
});
});

Answer 11

He creado una muestra. Que funcione para ti.

var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 500;
var oldData = $("p.content").html();
$(''#tyingBox'').keydown(function () {
clearTimeout(typingTimer);
if ($(''#tyingBox'').val) {
typingTimer = setTimeout(function () {
$("p.content").html(''Typing...'');
}, doneTypingInterval);
}
});
$(''#tyingBox'').keyup(function () {
clearTimeout(typingTimer);
typingTimer = setTimeout(function () {
$("p.content").html(oldData);
}, finaldoneTypingInterval);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="tyingBox" tabindex="1" placeholder="Enter Message"></textarea>
<p class="content">Text will be replace here and after Stop typing it will get back</p>

http://jsfiddle.net/utbh575s/

Answer 12

La vinculación al evento oninput parece funcionar bien en la mayoría de los navegadores sanos. IE9 también lo admite, pero la implementación tiene errores (el evento no se activa cuando se eliminan caracteres).

Con jQuery versión 1.7+, el método on es útil para vincularse al evento de esta manera:

$(".inputElement").on("input", null, null, callbackFunction);

Answer 13

Puede que llegue tarde a la fiesta aquí, pero ¿no puede simplemente usar el evento .change () que proporciona jQuery?

Deberías poder hacer algo como ...

$(#CONTROLID).change(function(){
do your stuff here ...
});

Siempre puedes vincularlo a una lista de controles con algo como ...

var flds = $("input, textarea", window.document);
flds.live(''change keyup'', function() {
do your code here ...
});

La carpeta en vivo garantiza que todos los elementos que existen en la página ahora y en el futuro se manejen.

Answer 14

Puedes ver este ejemplo y elegir cuáles son los eventos que te interesan:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>evetns</title>
</head>
<body>
<form>
<input class="controlevents" id="i1" type="text" /><br />
<input class="controlevents" id="i2" type="text" /><br />
<input class="controlevents" id="i3" type="text" /><br />
<input class="controlevents" id="i4" type="text" /><br />
<input class="controlevents" id="i5" type="text" /><br />
</form>
<div id="datatext"></div>
</body>
</html>
<script>
$(function(){
function testingevent(ev){
if (ev.currentTarget.tagName=="INPUT")
$("#datatext").append("<div>id : " + ev.currentTarget.id + ", tag: " + ev.currentTarget.tagName + ", type: "+ ev.type +"</div>");
}
var eventlist = ["resizeend","rowenter","dragleave","beforepaste","dragover","beforecopy","page","beforeactivate","beforeeditfocus","controlselect","blur",
"beforedeactivate","keydown","dragstart","scroll","propertychange","dragenter","rowsinserted","mouseup","contextmenu","beforeupdate",
"readystatechange","mouseenter","resize","copy","selectstart","move","dragend","rowexit","activate","focus","focusin","mouseover","cut",
"mousemove","focusout","filterchange","drop","blclick","rowsdelete","keypress","losecapture","deactivate","datasetchanged","dataavailable",
"afterupdate","mousewheel","keyup","movestart","mouseout","moveend","cellchange","layoutcomplete","help","errorupdate","mousedown","paste",
"mouseleave","click","drag","resizestart","datasetcomplete","beforecut","change","error","abort","load","select"];
var inputs = $(".controlevents");
$.each(eventlist, function(i, el){
inputs.bind(el, testingevent);
});
});
</script>

Answer 15

Una solución elegante en tiempo real para jQuery> = 1.9

$("#input-id").on("change keyup paste", function(){
dosomething();
})

Si también desea detectar un evento de "clic", simplemente:

$("#input-id").on("change keyup paste click", function(){
dosomething();
})

Si está usando jQuery <= 1.4, solo use live lugar de on .

Answer 16

Respuesta de 2017 : el evento de entrada hace exactamente esto por algo más reciente que IE8.

$(el).on(''input'', callback)