javascript - style - title css

Cambiando 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 combinación de teclas para la letra "b"? Es decir, cada vez que escribe la letra "a" en el div, la salida es en realidad la letra "b".

No estoy tan preocupado por una solución que funciona en IE, solo una que funciona en Safari, Chrome y FF.

En Chrome, puedo ver que un evento de pulsación de tecla tiene las propiedades "charCode", "keyCode" y "which", a las cuales se les asigna el número de evento de keypress. Si disparo un evento con una pulsación de tecla, puedo modificar estos valores, pero no puedo averiguar 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, que, 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

Aquí hay un ejemplo sin usar ninguna librería.

const input = document.querySelector(''input'')

// this is the order of events into an input
input.addEventListener(''focus'', onFocus)
input.addEventListener(''keydown'', keyDown)
input.addEventListener(''keypress'', keyPress)
input.addEventListener(''input'', onInput)
input.addEventListener(''keyup'', keyUp)
input.addEventListener(''change'', onChange)
input.addEventListener(''blur'', onBlur)

function onFocus  (event) { info(event) }
function keyDown  (event) { info(event) }
function keyPress (event) {
  info(event)
  // this 2 calls will stop `input` and `change` events
  event.preventDefault();
  event.stopPropagation();
  
  // get current props
  const target = event.target
  const start = target.selectionStart;
  const end = target.selectionEnd;
  const val = target.value;
  
  // get some char based on event
  const char = getChar(event);
  
  // create new value
  const value = val.slice(0, start) + char + val.slice(end);
  
  // first attemp to set value
  // (doesn''t work in react because value setter is overrided)
  // target.value = value

  // second attemp to set value, get native setter
  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
    window.HTMLInputElement.prototype,
    "value"
  ).set;
  nativeInputValueSetter.call(target, value);

  // change cursor position
  target.selectionStart = target.selectionEnd = start + 1;
  
  // dispatch `input` again
  const newEvent = new InputEvent(''input'', {
    bubbles: true,
    inputType: ''insertText'',
    data: char
  })
  event.target.dispatchEvent(newEvent);
}
function keyUp    (event) { info(event) }
function onInput  (event) { info(event) }
function onChange (event) { info(event) }
function onBlur   (event) {
  // dispatch `change` again
  const newEvent = new Event(''change'', { bubbles: true })
  event.target.dispatchEvent(newEvent);
  info(event)
}

function info     (event) { console.log(event.type) }

function getChar(event) {
  // will show X if letter, will show Y if Digit, otherwise Z
  return event.code.startsWith(''Key'')
    ? ''X''
    : event.code.startsWith(''Digit'')
      ? ''Y''
      : ''Z''
}

<input type="text">

Answer 2

Bueno, lo que podría hacer para un <input> o <textarea> es asegurarse de que el valor no tenga ningún carácter "a":

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

Es probable que este enfoque no pueda manejar todos los trucos posibles que se podrían lograr con algo que realmente cambió el carácter "presionado", pero no conozco ninguna forma de hacerlo.

edit - oh, y la razón por la que escribí ese ejemplo con el "arreglo" que ocurre en un controlador de tiempo de espera es que se asegura de que el navegador tenga la oportunidad de manejar el comportamiento nativo del evento "pulsación de tecla". 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 del culto de la carga en este código, me doy cuenta.

Answer 3

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

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

Answer 4

No estoy seguro de si esto se puede hacer "fácilmente", 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é que jQuery tiene un complemento de simulación para simular eventos de pulsación de teclas, etc., jQuery Simulate . Puede que valga la pena verlo, también posiblemente algún tipo de evento jQuery Trigger() .

Answer 5

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 e insertar manualmente el carácter que desea en el punto de inserción / cometa actual. He provisto código para hacer esto en varios lugares en . Para un elemento contenteditable :

• Necesidad de establecer la posición del cursor al final de una división contentEditable, problema con los objetos de selección y rango

Aquí hay un ejemplo de jsFiddle: http://www.jsfiddle.net/Ukkmu/4/

Para una entrada:

• ¿Puedo cambiar condicionalmente el carácter ingresado en una entrada al presionar una tecla?

• Mostrar diferentes caracteres del teclado de uno escrito en google chrome.

Ejemplo de jsFiddle en varios navegadores: http://www.jsfiddle.net/EXH2k/6/

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