javascript - sublime - ¿La mejor manera de rastrear el tipo de entrada en el tipo de entrada="texto"?
insertar imagen html5 (14)
En mi experiencia, la input type="text" onchange event usualmente ocurre solo después de que dejas ( blur ) el control.
¿Hay una manera de forzar que el navegador active el cambio cada vez que textfield contenido del campo de texto? Si no, ¿cuál es la forma más elegante de rastrear esto "manualmente"?
El uso de eventos onkey* no es confiable, ya que puede hacer clic derecho en el campo y elegir Pegar, y esto cambiará el campo sin ninguna entrada de teclado.
¿Es setTimeout la única manera? .. Feo :-)
"entrada" funcionó para mí.
var searchBar = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);
2018 aquí, esto es lo que hago:
$(inputs).on(''change keydown paste input propertychange click keyup blur'',handler);
Si puede señalar fallas en este enfoque, se lo agradecería.
A continuación el código funciona bien para mí con Jquery 1.8.3
HTML: <input type="text" id="myId" />
Javascript / JQuery:
$("#myId").on(''change keydown paste input'', function(){
doSomething();
});
Creo que en 2018 es mejor usar el evento de input .
-
Como describe la especificación WHATWG ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):
Se dispara a los controles cuando el usuario cambia el valor (vea también el evento de cambio )
-
Aquí hay un ejemplo de cómo usarlo:
<input type="text" oninput="handleValueChange()">
Hay una solución bastante cercana (no arregles todas las formas de pegado) pero la mayoría de ellas:
Funciona tanto para entradas como para textareas:
<input type="text" ... >
<textarea ... >...</textarea>
Hazlo así:
<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>
Como dije, no todas las formas de Pegar disparan un evento en todos los navegadores ... lo peor es que algunos no disparan ningún evento, pero los temporizadores son horribles de usar para eso.
Pero la mayoría de las formas de pegado se realizan con el teclado y / o el mouse, por lo que normalmente un onkeyup u onmouseup se disparan después de pegar, también se dispara onkeyup cuando se escribe en el teclado.
Asegúrese de que el código de verificación no lleve mucho tiempo ... de lo contrario, el usuario tendrá una mala impresión.
Sí, el truco es disparar con la tecla y con el mouse ... pero cuidado, ambos pueden dispararse, así que ten en cuenta esto.
Javascript es impredecible y divertido aquí.
-
onchangesolo se produce cuando se desenfoca el cuadro de texto. -
onkeyup&onkeypressno siempre ocurre al cambiar el texto -
onkeydownocurre al cambiar el texto (pero no se puede rastrear, cortar y pegar con un clic del mouse) -
onpaste&oncutproduce con la pulsación de tecla e incluso con el botón derecho del ratón.
Entonces, para rastrear el cambio en el cuadro de texto, necesitamos onkeydown , oncut y onpaste . En la devolución de llamada de estos eventos, si verifica el valor del cuadro de texto, no obtiene el valor actualizado, ya que el valor cambia después de la devolución de llamada. Entonces, una solución para esto es establecer una función de tiempo de espera con un tiempo de espera de 50 mili segundos (o puede ser menos) para rastrear el cambio.
Este es un truco sucio, pero esta es la única manera, como he investigado.
Aquí hay un ejemplo. http://jsfiddle.net/2BfGC/12/
Para rastrear cada uno, pruebe este ejemplo y antes de eso, reduzca completamente la velocidad de parpadeo del cursor a cero.
<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>
</body>
onblur: evento genera en salida
onchange: el evento se genera al salir si se realizan cambios en el texto de entrada
onkeydown: el evento se genera al presionar cualquier tecla (también para mantener pulsado los tiempos largos)
onkeyup: evento generado en cualquier lanzamiento clave
onkeypress: igual que onkeydown (o onkeyup) pero no reacciona para ctrl, backsace, alt other
Por favor, juzgue el siguiente enfoque usando JQuery:
HTML:
<input type="text" id="inputId" />
Javascript (JQuery):
$("#inputId").keyup(function(){
$("#inputId").blur();
$("#inputId").focus();
});
$("#inputId").change(function(){
//do whatever you need to do on actual change of the value of the input field
});
Si usa SOLO Internet Explorer, puede usar esto:
<input type="text" id="myID" onpropertychange="TextChange(this)" />
<script type="text/javascript">
function TextChange(tBox) {
if(event.propertyName==''value'') {
//your code here
}
}
</script>
Espero que ayude.
También puede usar los keydown , keyup y keypress .
Tenía un requisito similar (campo de texto de estilo de twitter). Usado onkeyup y onchange . onchange realmente se encarga de las operaciones de pegado del mouse durante la pérdida de enfoque del campo.
[Actualización] En HTML5 o posterior, use oninput para obtener actualizaciones de modificación de caracteres en tiempo real, como se explica en otras respuestas anteriores.
onkeyup sucede después de escribir, por ejemplo, keydown t cuando levanto el dedo, ocurre la acción, pero al keydown la keydown ocurre antes de que keydown el carácter t
Espero que esto sea de ayuda para alguien.
Así que onkeyup es mejor para cuando quieres enviar lo que acabas de escribir ahora.
Actualizar:
Ver Otra respuesta (2015).
Respuesta original de 2009:
Entonces, ¿quieres que el evento onchange se dispare con keydown, blur y paste? Eso es magia.
Si desea realizar un seguimiento de los cambios a medida que se escriben, use "onkeydown" . Si necesita interceptar las operaciones de pegado con el mouse, use "onpaste" ( IE , FF3 ) y "oninput" ( FF, Opera, Chrome, Safari 1 ).
1 Roto para <textarea> en Safari. Utilice textInput lugar
Estos días escuchan para la oninput . Se siente como un cambio sin la necesidad de perder el foco en el elemento. Es HTML5.
Es compatible con todos (incluso con dispositivos móviles), excepto IE8 y versiones anteriores. Para IE, agregue onpropertychange . Lo uso así:
const $source = document.querySelector(''#source'');
const $result = document.querySelector(''#result'');
const typeHandler = function(e) {
$result.innerHTML = e.target.value;
}
$source.addEventListener(''input'', typeHandler) // register for oninput
$source.addEventListener(''propertychange'', typeHandler) // for IE8
// $source.addEventListener(''change'', typeHandler) // fallback for Firefox for <select><option>, for <input> oninput is enough
<input id="source" />
<div id="result"></div>