Tengo una página web con un textarea, y necesito capturar las teclas escrito por el usuario (por lo que puedo sustituir diferentes caracteres unicode para las teclas de la máquina). Mi código es el siguiente:

$("#myTextArea").bind('keypress', function(event) {

    var keyInput = event.which;
   //call other functions

});

Este código anterior funciona en Pc, y el iPhone/Safari. Sin embargo, error al usar Chrome en android (samsung) de la tableta. Por alguna razón, cuando yo escriba en el virtual android (suave) del teclado, el «keypress» evento no se activa. La versión de android es 5.0.2.

Si trato de usar «keyUp» o «keyDown», siempre devuelve 229 para todos los caracteres (excepto la tecla de retorno, el espacio, la tecla de retroceso, etc).

Aunque el código de la tecla es siempre 229, el cuadro de texto muestra el correcto caracteres tecleados por el usuario. Lo que significa que el dispositivo sabe que tecla se ha introducido, pero de alguna manera yo soy incapaz de conseguir una manija en este caso (y el código de la llave) con javascript.

Aquí 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 undefined

Cualquier ayuda con respecto a este tema se agradece..

InformationsquelleAutor agentwarn | 2015-06-09

7 Comentarios

  1. 10

    Por desgracia parece que no puede hacer mucho aquí.
    Evento Keypress es obsoleto, por lo tanto no se activan.
    229 en keyup y keydown indica que el búfer de teclado está ocupado. La razón – cuando se presiona una tecla – la entrada todavía no está garantizado a ser lo que el usuario presiona, porque de auto suggest y otros eventos que puedan seguir inmediatamente y anular el evento.
    Aunque en mi opinión hubiera sido mejor enviar la clave de la primera, luego el fuego de otro evento tal vez en el auto sugieren, de modo que puede actuar por separado…

    La única cosa que yo actualmente se sabe de es unir a los dos, keydown y keyup, almacenar el valor en keydown, obtener el valor en keyup y encontrar el delta, que es lo que el usuario presionó. Por desgracia esto no va a funcionar para los no-controles de entrada (por ejemplo, – el cuerpo o algo así).
    Tal vez no lo que quieres escuchar como respuesta, pero todavía.

    • oninput funciona, pero no tiene la misma funcionalidad. Es muy difícil sustituir oninput de pulsación de tecla, al menos en mi caso.
    • Por desgracia lo es. No estoy seguro de que hay mejores soluciones a este problema, aunque.
    • amablemente ver mi respuesta
  2. 6

    Me encontré con el mismo problema. Varias explicaciones están ahí, pero de todos modos me parece extraño que ninguna de las soluciones que se ofrecen.
    Por el momento lo resuelto por la captura de la oninput evento.

    «Este evento es similar al evento onchange. La diferencia es que el oninput evento se produce inmediatamente después de que el valor de un elemento que ha cambiado, mientras que onchange se produce cuando el elemento pierde el foco, después de que el contenido ha cambiado»

    Este evento de apoyo a inserta texto, de pegar texto o correcciones en los & sugerencias.

    que no me da la solución perfecta porque yo sólo puede manipular el texto DESPUÉS de que se ha entrado, pero por el momento es la mejor que tengo.

    Si alguien tiene una solución mejor, estaré encantado de oír hablar de ella.

  3. 4

    Me encontré con esta discusión, mientras que la investigación de un proyecto en el que estaba trabajando. Tuve que crear máscaras de entrada para una aplicación móvil, y Pavel Donchev la respuesta me puso a pensar sobre lo que podría funcionar para capturar claves en Android. En mi proyecto específico, keydown y keyup no sería suficiente ya que el evento keyup se activa sólo después de que se suelta una tecla, lo que implicaría que en una tarde de validación, así que hice algunas investigaciones más (y un montón de prueba y error) con eventos de entrada y consiguió trabajo.

    JS:

    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);

    HTML:

    <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>

    La oninput evento se activa justo después de que el evento keydown, que es el momento perfecto para mi validaciones.

    He recopilado toda la cosa, en un artículo. Si tienes curiosidad, puedes leer sobre esto aquí.

    • Enlace-sólo respuestas no se anima en el desbordamiento de pila. Por favor, añadir una breve explicación a su respuesta.
  4. 3

    Hay un textInput evento que le da el carácter introducido

    const inputField = document.getElementById('wanted-input-field');
    
    inputField.addEventListener('textInput', function(e) {
        //e.data will be the 1:1 input you done
        const char = e.data; //In our example = "a"
    
        //If you want the keyCode..
        const keyCode = char.charCodeAt(0); //a = 97
    
        //Stop processing if "a" is pressed
        if (keyCode === 97) {
            e.preventDefault();
            return false;
        }
        return true;
    });
  5. 2

    sólo tienes que comprobar tu entrada de caracteres en el código de la tecla, si es 0 o 229 entonces aquí es la función getKeyCode() que utiliza charCodeAt de JS para devolver el código de la tecla que lleva cadena de entrada de un parámetro y devuelve el código de la tecla de último carácter.

    <script>
            var getKeyCode = function (str) {
                return str.charCodeAt(str.length);
            }
    
    
            $('#myTextfield').on('keyup',function(e){
    
                //for android chrome keycode fix
                if (navigator.userAgent.match(/Android/i)) {
    
                    var inputValue = this.value;
    
                    var charKeyCode = e.keyCode || e.which;
                    if (charKeyCode == 0 || charKeyCode == 229) { 
                        charKeyCode = getKeyCode(inputValue);
                        alert(charKeyCode+' key Pressed');
                    }else{
                       alert(charKeyCode+' key Pressed');
                        }
                }       
            });
        </script>
    • Esto se producirá si nos adentramos en el texto en algún lugar entre el cuadro de texto
    • sí,en esa situación, vamos a tener que modificar el código que corresponda a la situación. pero AFAIK esta es la única forma de interactuar con el teclado virtual de la pulsación de tecla,para obtener los valores de la clave
    • AkshayTilekar, Genial 🙂
    • @ImamudinNaseem 🙂
    • Imamudin Naseem, Esta es la razón por la que estoy usando en donde.selectionStart en mi respuesta en su lugar.
    • esto no es una solución. ¿Y si no estoy escribiendo en el extremo de la caja de entrada.

  6. 1

    He puesto en marcha recientemente un «menciona que» en la última versión de nuestro Astro AI asistida aplicación de Correo electrónico. Básicamente, el tipo de «@» en nuestro componer vista de la web y obtendrá una lista de sugerencias de autocompletar. Nosotros, al igual que la mayoría de la gente, tenía problemas tratando de resolver esto en el Javascript. Lo que finalmente funcionó fue una solución nativa. Si @Override WebView del onCreateInputConnection() método, usted puede ajustar el super.onCreateInputConnection() resultado (que es sólo un InputConnection interfaz) con una clase personalizada. A continuación, en el contenedor de la aplicación, puede interceptar la entrada a través de commitText() o setComposingText() o tal vez algún otro método específico para lo que usted está buscando…como se elimina. No sé si quiere obtener las devoluciones de llamada en los caracteres de control como flechas arriba y abajo, pero tal vez este puede ser un buen lugar para comenzar a resolver su problema específico.

  7. -3

    ME LO IMAGINÉ!

    Aquí un 100% de la solución de trabajo que funciona en todas partes con TODAS las prestaciones, incluyendo incluso emoji sugerencias en iOS y cualquier contenido pegado. Yo estoy usando la subcadena comparación a encontrar cosas que ha cambiado de onInput a onInput.

    Los puntos desde los que a la que se elimina el texto y de que a la que se inserta se señaló.

    De calificación y selección de una respuesta se agradece.

    • Comentarios de los usuarios votar en contra de esta respuesta son apreciados.
    • Me imagino que las razones son: formato incorrecto (No utilizadas), no legible en LO es en absoluto! Código de depuración (debugger, de la consola.de registro)

Dejar respuesta

Please enter your comment!
Please enter your name here