javascript - tecla - label html

¿Cómo detectar si la tecla presionada producirá un carácter dentro de un cuadro de texto<input>?

Question

Tengo un cuadro de texto normal:

<input type="text"> 

Uso jQuery para manejar eventos relacionados con claves:

$("input:text").keydown(function() {
    // keydown code
}).keypress(function() {
    // keypress code
}).keyup(function() {
    // keyup code
});

El usuario se enfoca en un cuadro de texto y presiona varias teclas en su teclado (las usuales: letras, números, MAYÚSCULAS, RETROCESO, ESPACIO, ...). Necesito detectar cuando el usuario presiona una tecla que va a aumentar la longitud del valor del cuadro de texto. Por ejemplo, la tecla "A" aumentará, la tecla "MAYÚS" no lo hará.

Recuerdo haber visto una conferencia de PPK en la que mencionaba la diferencia entre esos dos. Tiene algo que ver con el evento - keydown vs. keypress - y posiblemente con las propiedades del evento - key, char, keyCode.

¡Actualizar!

Necesito saber esta información dentro de los manipuladores keydown o keypress. No puedo esperar a que ocurra el evento de teclado.

Por qué necesito esto:

Tengo un cuadro de texto cuyo tamaño cambia dinámicamente en función de la entrada del usuario. Puedes echar un vistazo a esta demostración: http://vidasp.net/tinydemos/variable-size-text-box.html

En la demostración, tengo un manipulador de teclas y keyup. El controlador de teclado ajusta el tamaño del cuadro de texto en función del valor de entrada. Sin embargo, el manejador de teclas establece el tamaño para que sea 1 carácter más grande que el valor de entrada. La razón por la que hago esto es porque si no lo hacía, entonces el personaje se desbordaba fuera del cuadro de texto y solo cuando el usuario soltaba la tecla, el cuadro de texto se expandía. Esto se ve raro. Es por eso que tengo que anticiparme al nuevo personaje: agrando el cuadro de texto en cada keydown, ergo, antes de que el personaje aparezca en el cuadro de texto. Como puede ver en la demostración, este método se ve genial.

Sin embargo, el problema son las teclas RETROCESO y FLECHA - también expandirán el cuadro de texto en la operación de teclado, y solo en la tecla se corregirá el tamaño del cuadro de texto.

Una solución alternativa:

Una solución alternativa sería detectar las teclas RETROCESO, MAYÚSCULA y FLECHA de forma manual y actuar en función de eso:

// keydown handler
function(e) {
    var len = $(this).val().length;
    if (e.keyCode === 37 || e.keyCode === 39 ||
        e.keyCode === 16) { // ARROW LEFT or ARROW RIGHT or SHIFT key
        return;
    } else if (e.keyCode === 8) { // BACKSPACE key
        $(this).attr("size", len <= 1 ? 1 : len - 1);
    } else {
        $(this).attr("size", len === 0 ? 1 : len + 1);
    }
}

Esto funciona (y se ve muy bien) para RETROCESO, CAMBIO, FLECHA IZQUIERDA y FLECHA DERECHA. Sin embargo, me gustaría tener una solución más robusta.

Answer 1

Aquí hay una solución mucho más simple que funcionó bien para mí:

if(String.fromCharCode(event.keyCode).match(/(/w|/s)/g)) {
  //pressed key is a char
} else {
  //pressed key is a non-char
  //e.g. ''esc'', ''backspace'', ''up arrow''
}

Esto no requiere probar un elemento DOM (lo que agregaría latencia y fealdad).

Answer 2

Debería usar la propiedad keyEventArgs.Key en la función de teclado, esto le devolverá el valor numérico que dependerá del sistema.

aquí hay un enlace que tiene los diferentes códigos clave para los diferentes navegadores y sistema operativo:

http://www.quirksmode.org/js/keys.html

Answer 3

Esto creo que hará el trabajo, o si no está muy cerca y solo necesitará ajustes menores. Lo que debe recordar es que no puede decir nada confiablemente sobre ningún carácter que pueda escribirse en un evento de keydown o keyup : todo debe hacerse en un controlador de keypress . El recurso definitivo para eventos clave es http://unixpapa.com/js/key.html

También debe considerar las pastas, que este código no manejará. Deberá tener un controlador de eventos de paste separado (aunque este evento no es compatible con Firefox <3.0, Opera y navegadores webKit muy antiguos). Necesitará un temporizador en su controlador de pegado ya que es imposible en JavaScript acceder al contenido que está a punto de pegarse.

function isCharacterKeyPress(evt) {
    if (typeof evt.which == "undefined") {
        // This is IE, which only fires keypress events for printable keys
        return true;
    } else if (typeof evt.which == "number" && evt.which > 0) {
        // In other browsers except old versions of WebKit, evt.which is
        // only greater than zero if the keypress is a printable key.
        // We need to filter out backspace and ctrl/alt/meta key combinations
        return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
    }
    return false;
}

<input type="text" onkeypress="alert(isCharacterKeyPress(event))">

Answer 4

La posible solución que puedo encontrar es verificar la longitud de la clave en el evento.

P.ej:-

<input type="text" id="testId" onkeyup="keyChecking(event)" />

<script type="text/javascript">
function keyChecking(event) {

    if (event.key.length == 1) {
        alert("key produced character " + event.key);
    } else {
        alert("Key DOES NOT produce character");

        const alphabets = "AZaz09";
        const key = event.key;
        var notEvenASymbol = false;

        for (let i = 0; i < key.length; i++) {
            var charCode = key.charCodeAt(i);
            if ((charCode >= alphabets.charCodeAt(0) && charCode <= alphabets.charCodeAt(1)) ||
                (charCode >= alphabets.charCodeAt(2) && charCode <= alphabets.charCodeAt(3)) ||
                (charCode >= alphabets.charCodeAt(4) && charCode <= alphabets.charCodeAt(5))
            ) {
                notEvenASymbol = true;
                console.log(charCode);
                break;
            }
        }

        if (notEvenASymbol) {
            alert("Key DOES NOT produce even a symbol");
        }
        console.log(event.key);

    }
}    
</script>

Por lo tanto, si presiona cualquier carácter / símbolo, el event.key contendrá ese carácter y su duración será 1. Si presiona el carácter V , el event.key tendrá el valor V pero si presiona la tecla enter, entonces contendrá el valor Ingrese , si presiona mayús y luego Mayús y así sucesivamente. Por lo tanto, si una clave no produce un carácter, entonces su longitud será mayor que 1.

Actualizado

Algunas teclas especiales en el teclado producen un símbolo y su longitud puede ser mayor que 1, así que modifiqué el código para que pueda alertar incluso si no es un símbolo. Por ejemplo: - 😄 su longitud es 2. Algunos teclados móviles tienen teclas de método abreviado para tales símbolos.

Una tecla que no sea de carácter / símbolo en el teclado siempre será una combinación de alfabetos, caracteres numéricos o de ambos, por ejemplo: - F2 , Shift .

Gracias @Vicky Chijwani por llamar la atención sobre este escenario.

Answer 5

OK, creo que lo tengo. La solución es un poco hackish, pero en realidad funciona muy bien.

Al hacer clic, realice un setTimeout de 1 milisegundo, que llama a una función para verificar / cambiar la longitud de su cuadro de entrada.

http://jsfiddle.net/rygar/e2wQM/

Parece funcionar muy bien, especialmente en algunos lugares donde su versión no lo hace (por ejemplo, retroceder, CTRL + V, o seleccionar un montón de texto y pulsar eliminar)

Editar: incluso setTimeout con un retraso de 0ms parece funcionar.

Answer 6

Puede que este no sea el método que estás buscando, pero puedes verificar el valor de this.value.length en tu función de teclado. El valor de retorno es la longitud del texto en el campo de entrada ANTES de agregar el nuevo carácter. Por lo tanto, si vuelve a verificar la longitud en la función de teclado, será mayor si el usuario presionó un carácter, pero lo mismo si el usuario pulsa la tecla Mayús.

Answer 7

Supongo que está configurando un contador en la longitud de un campo de entrada, en cuyo caso no necesita ser tan elegante, puede seguir asignando la longitud del campo a una variable, y cuando el usuario llega a su la duración máxima solo les permite presionar eliminar o retroceder de esta manera:

$("input:text").keypress(function() {
var current = $(this).val().length;
if (current >= 130) {
if (e.which != 0 && e.which != 8) {
e.preventDefault();
}
}
}

Puede usar la variable actual para mostrar el contador también, o hacer maxlength - current para hacer una cuenta regresiva de cuántos charachters quedan

Answer 8

Tu objetivo es mantener el cuadro de texto más grande que el texto que se ha ingresado en él.

Logré esto al planear tener espacio para dos caracteres adicionales (no uno) en el cuadro de texto. Entonces:

// pseudo-code.... 
old_len = textbox.value.length
keyUp function() {
  var new_len = textbox.value.length
  if (new_len != old_len) {
    old_len = new_len
    textbox.style.size = new_len + 2 // pseudo code.
  }
}

La ventaja de lo anterior es que no necesita descender al mundo inferior de los códigos clave.