Cambio de la pulsación de tecla

Question

En un cuadro de entrada o contenteditable = true div, ¿cómo puedo modificar una pulsación de tecla para que la letra "a" devuelva una tecla para la letra "b"? Es decir, cada vez que escribe la letra "a" en el div, la salida es realmente la letra "b".

No me preocupa tanto una solución que funcione en IE, solo una que funcione en Safari, Chrome, & FF.

En Chrome, puedo ver que un evento de pulsación de tecla tiene las propiedades "charCode", "keyCode" y "which", a todos los cuales se les asigna el número de evento de pulsación de tecla. Si desactivo un evento con una pulsación de tecla, puedo modificar estos valores, pero no puedo determinar qué devolver para que la clave real que se escribe sea diferente. Por ejemplo:

$(window).keypress(function(e){ //$(window) is a jQuery object 
    e.charCode = 102; 
    e.which = 102; 
    e.keyCode = 102; 
    console.log(e); 
    return e; 
}); 

también puedo ver que junto con charCode, la cual, y keyCode, también hay una propiedad "originalEvent" que a su vez también tiene estas propiedades. Sin embargo, no he podido modificarlos (probé con cosas como e.originalEvent.charCode = 102).

Answer 1

No puede cambiar el carácter o la clave asociada con un evento clave, o simular completamente un evento clave. Sin embargo, puede manejar la pulsación de la tecla usted mismo e insertar manualmente el carácter que desee en el punto de inserción actual/cursor. He proporcionado código para hacer esto en varios lugares en Stack Overflow.Para un elemento contenteditable:

• Need to set cursor position to the end of a contentEditable div, issue with selection and range objects

Aquí está un ejemplo jsFiddle: http://www.jsfiddle.net/Ukkmu/4/

Para una entrada:

• Can I conditionally change the character entered into an input on keypress?

• show different keyboard character from the typed one in google chrome

-Cruz navegador ejemplo jsFiddle: http://www.jsfiddle.net/EXH2k/6/

IE> = 9 y el IE ejemplo no jsFiddle: http://www.jsfiddle.net/EXH2k/7/

Answer 2

Bueno lo que podría hacer para una <input> o <textarea> es sólo asegúrese de que el valor no tiene ningún caracteres "a" en ella:

$('input.whatever').keypress(function() { 
    var inp = this; 
    setTimeout(function() { 
    inp.value = inp.value.replace(/a/g, 'b'); 
    }, 0); 
}); 

Este enfoque probablemente no podía manejar todo lo posible trucos que podría ejecutar con algo que realmente cambió el carácter "presionado", pero no sé cómo hacerlo.

edición — Ah, y la razón por la que he escrito en ese ejemplo con el "fixup" ocurre en un controlador de tiempo de espera es que se asegura de que el navegador tiene la oportunidad de manejar el comportamiento nativo para la "pulsación de tecla" evento. Cuando se ejecuta el código del controlador de tiempo de espera, estamos seguros de que el valor del elemento se habrá actualizado. Hay un toque de culto a la carga de este código, me doy cuenta.

Answer 3

No estoy seguro si esto es "fácil" hacer de poder, con algo como esto:

$(window).keypress(function(e) { 
    //Captures 'a' or 'A' 
    if(e.which == 97 || e.which == 65) 
    { 
     //Simulate a keypress in a specific field 
    } 
}); 

sí sé que jQuery tiene un plug-in para simular simular eventos de pulsación etc, jQuery Simulate. Puede valer la pena investigar, posiblemente también algún tipo de evento jQuery Trigger().

Answer 4

Mi ejemplo de solución (cambio en input[type=text] el carácter ','-'.'):

element.addEventListener('keydown', function (event) { 
if(event.key === ','){ 
    setTimeout(function() { 
    event.target.value += '.'; 
    }, 4); 
    event.preventDefault(); 
};