usuario - prompt javascript
Cómo detectar el contenido de un cuadro de texto ha cambiado (13)
Use los cierres para recordar cuál era el texto en la casilla de verificación antes del golpe de tecla y verifique si esto ha cambiado.
Sí. No tiene que usar cierres necesariamente, pero tendrá que recordar el valor antiguo y compararlo con el nuevo.
¡Sin embargo! Esto aún no detectará todos los cambios, porque existen formas de editar el contenido del cuadro de texto que no implican ninguna pulsación de tecla. Por ejemplo, seleccionando un rango de texto y luego haciendo clic con el botón derecho del ratón. O arrastrándolo. O soltar 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 debes detectar cada cambio, tienes que sondearlo. Podría window.setInterval para verificar el campo con su valor anterior cada (digamos) segundo. También puede conectar onkeyup a la misma función para que los cambios causados por la pulsación de teclas se reflejen más rápidamente.
¿Incómodo? Sí. Pero es eso o simplemente hacerlo de manera normal en HTML y no intentar actualizar instantáneamente.
Quiero detectar cada vez que el contenido de un cuadro de texto ha cambiado. Puedo usar el método keyup, pero eso también detectará las pulsaciones que no generan letras, como las teclas de flecha. Pensé en dos métodos para hacer esto usando el evento keyup:
- Verifique explícitamente si el código ASCII de la tecla presionada es una letra / retroceso / eliminar
- 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 incómodos.
¿Consideras usar change() ?
$("#myTextBox").change(function() { alert("content changed"); });
Algo como esto debería funcionar, principalmente porque el focus y la focusout terminarán con dos valores separados. Estoy usando data aquí porque almacena valores en el elemento pero no toca el DOM. También es una forma fácil de almacenar el valor conectado a su elemento. Podrías usar una variable de mayor alcance con la misma facilidad.
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);
}
Comience observando el evento ''entrada'' en lugar de ''cambiar''.
jQuery(''#some_text_box'').on(''input'', function() {
// do your stuff
});
... que es agradable y limpio, pero puede extenderse más allá a:
jQuery(''#some_text_box'').on(''input propertychange paste'', function() {
// do your stuff
});
El evento ''cambio'' no funciona correctamente, pero la ''entrada'' es perfecta.
$(''#your_textbox'').bind(''input'', function() {
/* This will be fired every time, when textbox''s value changes. */
} );
Hay un ejemplo completo de trabajo here .
<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>
Me gustaría preguntar por qué está intentando detectar cuándo cambió el contenido del cuadro de texto en tiempo real .
Una alternativa sería configurar un temporizador (a través de setIntval?) Y comparar el último valor guardado con el actual y luego restablecer un temporizador. Esto garantizaría la captura de CUALQUIER cambio, ya sea causado por teclas, mouse, algún otro dispositivo de entrada que no haya considerado, o incluso que JavaScript cambie el valor (otra posibilidad que nadie mencionó) desde una parte diferente de la aplicación.
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
Recomendaría echar un vistazo al widget de autocompletado de la interfaz de usuario de jQuery. Manejaron la mayoría de los casos allí, ya que su código base es más maduro que la mayoría de los que existen.
A continuación se muestra 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 a input, keydown, keyup, keypress, focus and blur . Luego tienen un manejo especial para todo tipo de teclas, como page up, page down, up arrow key and down arrow key . Se utiliza un temporizador antes de obtener el contenido del cuadro de texto. Cuando un usuario escribe una clave que no corresponde a un comando (tecla arriba, abajo y así sucesivamente), hay un temporizador que explora el contenido después de unos 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 interfaz de usuario tenga la oportunidad de actualizarse. Cuando se ejecuta Javascript, la interfaz de usuario no se puede actualizar, por lo tanto, la llamada a la función de retraso. Esto funciona bien para otras situaciones, como mantener el enfoque 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 la interfaz de usuario jQuery (o en mi caso, desarrollar un widget personalizado).
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 hice. 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 varias solicitudes al mismo tiempo. Esto asegura que el temporizador "se detiene" cuando se envía el formulario y "comienza" cuando se completa la solicitud. Lo hago llamando a checkSearchChanged cuando finaliza mi llamada ajax. Obviamente puedes 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:
Utilice el evento de textchange través de un jQuery shim personalizado para input compatibilidad de input 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, incluido el <textarea>content</textarea> , que no siempre funciona con el change keyup etc. para todos los navegadores que no entienden input evento de input .
<!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 de bin JS
Esto también se encarga de pegar, eliminar y no duplica el esfuerzo en keyup.
Si no está utilizando un shim, use jQuery on("input propertychange") eventos.
// works with most recent browsers (use this if not using src="...splendid.textchange.js")
$(''textarea'').on("input propertychange",function(){
yourFunctionHere($(this).val());
});
Utilice 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'');
}
});
});
$(document).on(''input'',''#mytxtBox'',function () {
console.log($(''#mytxtBox'').val());
});
Puede usar el evento ''entrada'' para detectar el cambio de contenido en el cuadro de texto. No use ''en vivo'' para enlazar el evento, ya que está en desuso en Jquery-1.7, así que use ''on''.