Cómo detectar el contenido de un cuadro de texto ha cambiado

Quiero detectar cada vez que el contenido de un cuadro de texto ha cambiado. Puedo usar el método de teclado, pero eso también detectará las pulsaciones de teclas que no generan letras, como las teclas de flecha. Pensé en dos métodos para hacer esto usando el evento keyup:

1. Compruebe explícitamente si el código ASCII de la tecla presionada es una letra \ retroceso \ eliminar
2. Use los cierres para recordar cuál era el texto en el cuadro de texto antes del golpe de tecla y verifique si esto ha cambiado.

Ambos se ven un poco engorrosos.

Comience a observar el evento 'input' en lugar de 'change'.

jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

... que es agradable y limpio, pero puede extenderse aún más a:

jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});

Use el evento onchange en HTML / JavaScript estándar.

En jQuery ese es el evento change () . Por ejemplo:

$('element').change(function() { // do something } );

EDITAR

Después de leer algunos comentarios, ¿qué pasa con:

$(function() {
    var content = $('#myContent').val();

    $('#myContent').keyup(function() { 
        if ($('#myContent').val() != content) {
            content = $('#myContent').val();
            alert('Content has been changed');
        }
    });
});

El evento 'cambiar' no funciona correctamente, pero la 'entrada' es perfecta.

$('#your_textbox').bind('input', function() {
    /* This will be fired every time, when textbox's value changes. */
} );

Qué tal esto:

<jQuery 1.7

$("#input").bind("propertychange change keyup paste input", function(){
    // do stuff;
});

> jQuery 1.7

$("#input").on("propertychange change keyup paste input", function(){
    // do stuff;
});

Esto funciona en IE8 / IE9, FF, Chrome

Use los cierres para recordar cuál era el texto en la casilla de verificación antes de presionar la tecla y verifique si esto ha cambiado.

Sí. No tiene que usar cierres necesariamente, pero deberá recordar el valor anterior y compararlo con el nuevo.

¡Sin embargo! Esto todavía no captará todos los cambios, porque hay formas de editar el contenido del cuadro de texto que no implica ninguna pulsación de tecla. Por ejemplo, seleccionando un rango de texto y luego haciendo clic con el botón derecho del mouse. O arrastrándolo. O colocar texto de otra aplicación en el cuadro de texto. O cambiar una palabra a través del corrector ortográfico del navegador. O...

Entonces, si debe detectar cada cambio, debe sondearlo. Podría window.setIntervalverificar el campo contra su valor anterior cada (digamos) segundo. También se podría conectar onkeyupa la misma función de manera que los cambios que están causadas por las pulsaciones de teclas se reflejan más rápido.

¿Incómodo? Si. Pero es eso o simplemente hazlo de la manera normal de cambio de HTML y no intentes actualizar al instante.

$(document).on('input','#mytxtBox',function () { 
 console.log($('#mytxtBox').val());
});

Puede usar el evento 'input' para detectar el cambio de contenido en el cuadro de texto. No use 'live' para vincular el evento ya que está en desuso en Jquery-1.7, así que use 'on'.

Supongo que está buscando hacer algo interactivo cuando cambia el cuadro de texto (es decir, recuperar algunos datos a través de ajax). Estaba buscando esta misma funcionalidad. Sé que usar una solución global no es la más robusta o elegante, pero eso es lo que elegí. Aquí hay un ejemplo:

var searchValue = $('#Search').val();
$(function () {
    setTimeout(checkSearchChanged, 0.1);
});

function checkSearchChanged() {
    var currentValue = $('#Search').val();
    if ((currentValue) && currentValue != searchValue && currentValue != '') {
        searchValue = $('#Search').val();
        $('#submit').click();
    }
    else {
        setTimeout(checkSearchChanged, 0.1);
    }
}

Una cosa clave a tener en cuenta aquí es que estoy usando setTimeout y no setInterval ya que no quiero enviar múltiples solicitudes al mismo tiempo. Esto asegura que el temporizador se "detiene" cuando se envía el formulario y "comienza" cuando se completa la solicitud. Hago esto llamando a checkSearchChanged cuando finaliza mi llamada ajax. Obviamente, puede expandir esto para verificar la longitud mínima, etc.

En mi caso, estoy usando ASP.Net MVC para que pueda ver cómo vincular esto con MVC Ajax también en la siguiente publicación:

http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx

Recomendaría echar un vistazo al widget de autocompletar jQuery UI. Manejaron la mayoría de los casos allí, ya que su base de código es más madura que la mayoría de los existentes.

A continuación hay un enlace a una página de demostración para que pueda verificar que funciona. http://jqueryui.com/demos/autocomplete/#default

Obtendrá el mayor beneficio al leer la fuente y ver cómo la resolvieron. Puede encontrarlo aquí: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .

Básicamente lo hacen todo, se unen input, keydown, keyup, keypress, focus and blur. Luego tienen un manejo especial para todo tipo de claves como page up, page down, up arrow key and down arrow key. Se usa un temporizador antes de obtener el contenido del cuadro de texto. Cuando un usuario escribe una tecla que no corresponde a un comando (tecla arriba, tecla abajo, etc.) hay un temporizador que explora el contenido después de aproximadamente 300 milisegundos. Se ve así en el código:

// switch statement in the 
switch( event.keyCode ) {
            //...
            case keyCode.ENTER:
            case keyCode.NUMPAD_ENTER:
                // when menu is open and has focus
                if ( this.menu.active ) {
                    // #6055 - Opera still allows the keypress to occur
                    // which causes forms to submit
                    suppressKeyPress = true;
                    event.preventDefault();
                    this.menu.select( event );
                }
                break;
            default:
                suppressKeyPressRepeat = true;
                // search timeout should be triggered before the input value is changed
                this._searchTimeout( event );
                break;
            }
// ...
// ...
_searchTimeout: function( event ) {
    clearTimeout( this.searching );
    this.searching = this._delay(function() { // * essentially a warpper for a setTimeout call *
        // only search if the value has changed
        if ( this.term !== this._value() ) { // * _value is a wrapper to get the value *
            this.selectedItem = null;
            this.search( null, event );
        }
    }, this.options.delay );
},

La razón para usar un temporizador es para que la IU tenga la oportunidad de actualizarse. Cuando se ejecuta Javascript, la IU no se puede actualizar, por lo tanto, la llamada a la función de retraso. Esto funciona bien para otras situaciones, como mantener el foco en el cuadro de texto (utilizado por ese código).

Por lo tanto, puede usar el widget o copiar el código en su propio widget si no está utilizando jQuery UI (o en mi caso, desarrollando un widget personalizado).

Me gustaría preguntarle por qué está tratando de detectar cuándo el contenido del cuadro de texto cambió en tiempo real .

Una alternativa sería establecer un temporizador (a través de setIntval?) Y comparar el último valor guardado con el actual y luego restablecer un temporizador. Esto garantizaría detectar CUALQUIER cambio, ya sea causado por teclas, mouse, algún otro dispositivo de entrada que no consideró, o incluso JavaScript cambiando el valor (otra posibilidad que nadie mencionó) desde una parte diferente de la aplicación.

¿Considera usar el evento de cambio ?

$("#myTextBox").change(function() { alert("content changed"); });

Use el textchangeevento a través de jQuery shim personalizado para la inputcompatibilidad entre navegadores . http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (github bifurcado más recientemente: https://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )

Esto maneja todas las etiquetas de entrada <textarea>content</textarea>, lo que no siempre funciona con change keyupetc. (!) Solo jQuery on("input propertychange")maneja las <textarea>etiquetas de manera consistente, y lo anterior es una imitación para todos los navegadores que no entienden el inputevento.

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/pandell/jquery-splendid-textchange/master/jquery.splendid.textchange.js"></script>
<meta charset=utf-8 />
<title>splendid textchange test</title>

<script> // this is all you have to do. using splendid.textchange.js

$('textarea').on("textchange",function(){ 
  yourFunctionHere($(this).val());    });  

</script>
</head>
<body>
  <textarea style="height:3em;width:90%"></textarea>
</body>
</html>

Prueba JS Bin

Esto también maneja pegar, eliminar y no duplica el esfuerzo en el keyup.

Si no usa una cuña, use on("input propertychange")eventos jQuery .

// works with most recent browsers (use this if not using src="...splendid.textchange.js")

$('textarea').on("input propertychange",function(){ 
  yourFunctionHere($(this).val());    
});  

Hay un ejemplo de trabajo completo aquí .

<html>
<title>jQuery Summing</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
$(document).ready(function() {
$('.calc').on('input', function() {
var t1 = document.getElementById('txt1');
var t2 = document.getElementById('txt2');
var tot=0;
if (parseInt(t1.value))
tot += parseInt(t1.value);
if (parseInt(t2.value))
tot += parseInt(t2.value);
document.getElementById('txt3').value = tot;
});
});
</script>
</head>
<body>
<input type='text' class='calc' id='txt1'>
<input type='text' class='calc' id='txt2'>
<input type='text' id='txt3' readonly>
</body>
</html>

Algo como esto debería funcionar, principalmente porque focusy focusoutterminaría con dos valores separados. Estoy usando dataaquí porque almacena valores en el elemento pero no toca el DOM. También es una manera fácil de almacenar el valor conectado a su elemento. También podría usar fácilmente una variable de mayor alcance.

var changed = false;

$('textbox').on('focus', function(e) {
    $(this).data('current-val', $(this).text();
});

$('textbox').on('focusout', function(e) {
    if ($(this).data('current-val') != $(this).text())
        changed = true;
    }
    console.log('Changed Result', changed);
}

Este código detecta cada vez que el contenido de un cuadro de texto ha cambiado por el usuario y modificado por el código Javascript.

var $myText = jQuery("#textbox");

$myText.data("value", $myText.val());

setInterval(function() {
    var data = $myText.data("value"),
    val = $myText.val();

    if (data !== val) {
        console.log("changed");
        $myText.data("value", val);
    }
}, 100);