Tengo una página web con un área de texto y necesito capturar las claves escritas por el usuario (para poder sustituir diferentes caracteres Unicode por las claves escritas). Mi código actual es el siguiente:
$("#myTextArea").bind('keypress', function(event) { var keyInput = event.which; // call other functions });Este código anterior funciona en PC y iPhone/Safari. Sin embargo, falla cuando se usa Chrome en una tableta Android (Samsung). Por alguna razón, cuando escribo en el teclado virtual (soft) de Android, el evento "presionar tecla" no se activa . La versión de Android es 5.0.2.
Si trato de usar "tecla arriba" o "tecla abajo", siempre devuelve 229 para todos los caracteres (excepto la tecla de retorno, espacio, retroceso, etc.).
Aunque el código clave siempre es 229, el área de texto muestra los caracteres correctos escritos por el usuario. Lo que significa que el dispositivo sabe qué clave se ingresó, pero de alguna manera no puedo manejar este evento (y el código clave) usando javascript.
Estas son las alternativas que he probado hasta ahora y sus resultados:
$("#mainTextArea").on("keydown keyup", function(event) { // event.which and event.keyCode both return 229 $(document).on('keypress', function(event) { // function is not triggered $('#myTextArea').bind('input keypress', function(event) { // comes inside function, but keyCode and which are undefinedCualquier ayuda con respecto a este problema es apreciada..
Desafortunadamente parece que no puedes hacer mucho aquí. El evento de pulsación de tecla está en desuso, por lo que no se activa. 229 en keyup y keydown indica que el búfer del teclado está ocupado. La razón, cuando presiona una tecla, aún no se garantiza que la entrada sea lo que el usuario presionó, debido a la sugerencia automática y otros eventos que pueden seguir inmediatamente e invalidar el evento. Aunque, en mi opinión, hubiera sido mejor enviar la clave primero, luego activar otro evento, tal vez en la sugerencia automática, para que pueda actuar por separado...
Lo único que sé actualmente es adjuntar a ambos: keydown y keyup, almacenar el valor en keydown, obtener el valor en keyup y encontrar el delta, que es lo que presionó el usuario. Desafortunadamente, esto no funcionará para los controles que no son de entrada (por ejemplo, el cuerpo o algo así). Tal vez no sea lo que quieres escuchar como respuesta, pero aún así.
Me encontré con el mismo problema. Hay varias explicaciones, pero de todos modos parece extraño que no se ofrezca ninguna solución. Por el momento lo resolví capturando el evento oninput .
"Este evento es similar al evento onchange. La diferencia es que el evento oninput ocurre inmediatamente después de que el valor de un elemento ha cambiado, mientras que onchange ocurre cuando el elemento pierde el foco, después de que se ha cambiado el contenido"
Este evento también admite texto insertado, desde pegar texto o desde correcciones y sugerencias.
no me da la solución perfecta porque solo puedo manipular el texto DESPUÉS de haberlo ingresado, pero por el momento es lo mejor que tengo.
Si alguien tiene una solución mejor, estaré encantado de escucharla.
Encontré esta discusión mientras investigaba para un proyecto en el que estaba trabajando. Tuve que crear máscaras de entrada para una aplicación móvil y la respuesta de Pavel Donchev me hizo pensar en qué podría funcionar para capturar claves en Android. En mi proyecto específico, keydown y keyup no serían suficientes porque el evento keyup solo se activa después de que se libera una clave, por lo que implicaría una validación tardía, así que investigué un poco más (y muchas pruebas y errores) con eventos de entrada y lo hice funcionar.
var input = document.getElementById('credit-card-mask'), oldValue, newValue, difference = function(value1, value2) { var output = []; for(i = 0; i < value2.length; i++) { if(value1[i] !== value2[i]) { output.push(value2[i]); } } return output.join(""); }, keyDownHandler = function(e) { oldValue = input.value; document.getElementById("onkeydown-result").innerHTML = input.value; }, inputHandler = function(e) { newValue = input.value; document.getElementById("oninput-result").innerHTML = input.value; document.getElementById("typedvalue-result").innerHTML = difference(oldValue, newValue); } ; input.addEventListener('keydown', keyDownHandler); input.addEventListener('input', inputHandler); <input type="text" id="credit-card-mask" /> <div id="result"> <h4>on keydown value</h4> <div id="onkeydown-result"></div> <h4>on input value</h4> <div id="oninput-result"></div> <h4>typed value</h4> <div id="typedvalue-result"></div> </div>El evento oninput se activa justo después del evento keydown, que es el momento perfecto para mis validaciones.
Compilé todo en un artículo. Si tienes curiosidad, puedes leer sobre esto aquí .