it-swarm.com.de

Tastendruck ändern

Wie kann ich in einem Eingabefeld oder in contenteditable = true div einen Tastendruck für den Buchstaben "a" ändern, um einen Keybress für den Buchstaben "b" zurückzugeben? Das heißt, jedes Mal, wenn Sie den Buchstaben "a" in das div eingeben, ist die Ausgabe tatsächlich der Buchstabe "b".

Mir geht es nicht so sehr um eine Lösung, die in IE funktioniert - nur eine, die in Safari, Chrome & FF funktioniert.

In Chrome kann ich feststellen, dass ein Keypress-Ereignis die Eigenschaften "charCode", "keyCode" und "which" aufweist, denen jeweils die Keypress-Ereignisnummer zugewiesen wird. Wenn ich ein Ereignis mit einem Tastendruck abfeuere, kann ich diese Werte ändern, aber ich kann nicht herausfinden, was zurückgegeben werden soll, sodass der tatsächlich eingegebene Schlüssel anders ist. Zum Beispiel:

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

Ich kann auch sehen, dass neben charCode, und keyCode, auch eine "originalEvent" -Eigenschaft vorhanden ist, die wiederum diese Eigenschaften hat. Ich konnte diese jedoch nicht ändern (ich habe es mit e.originalEvent.charCode = 102 versucht).

22
maxedison

Sie können den mit einem Schlüsselereignis verknüpften Buchstaben oder Schlüssel nicht ändern oder ein Schlüsselereignis nicht vollständig simulieren. Sie können den Tastendruck jedoch selbst ausführen und das gewünschte Zeichen an der aktuellen Einfügemarke/dem Einfügemarke manuell einfügen. Ich habe an mehreren Stellen in Stack Overflow Code dafür bereitgestellt. Für ein contenteditable Element:

Hier ein Beispiel für jsFiddle: http://www.jsfiddle.net/Ukkmu/4/

Für eine Eingabe:

Crossbrowser-Beispiel für jsFiddle: http://www.jsfiddle.net/EXH2k/6/

IE> = 9 und Nicht-IE jsFiddle-Beispiel: http://www.jsfiddle.net/EXH2k/7/

28
Tim Down

Nun, was Sie für einen <input> oder <textarea> tun könnten, stellen Sie einfach sicher, dass der Wert keine "a" -Zeichen enthält:

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

Diese Herangehensweise konnte wahrscheinlich nicht alle möglichen Tricks verarbeiten, die Sie mit etwas erreichen konnten, das den "gedrückten" Charakter wirklich vertauschte, aber ich weiß nicht, wie Sie das tun können.

edit - oh, und der Grund, warum ich in diesem Beispiel mit "fixup" in einem Timeout-Handler eingegeben habe, ist, dass der Browser die Möglichkeit hat, das native Verhalten für das "keypress" -Ereignis zu behandeln. Wenn der Timeout-Handlercode ausgeführt wird, sind wir sicher, dass der Wert des Elements aktualisiert wurde. Ich verstehe, dass dieser Code einen Hauch von Frachtkult enthält.

1
Pointy

Mein Lösungsbeispiel (ändern Sie in input[type=text] das Zeichen ',' in '.'):

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

Ich bin mir nicht sicher, ob dies "leicht" machbar ist, mit etwas wie dem folgenden:

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

Ich weiß, dass jQuery über ein simuliertes Plug-In verfügt, um Keypress-Ereignisse usw. zu simulieren. jQuery Simulate . Es kann sich lohnen, auch nach jQuery Trigger () event zu suchen.

0
Rion Williams

Hier ist ein Beispiel ohne Bibliotheken

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

0
Andrew Luca

Hier ein einfaches Beispiel zum Ersetzen von , bis . mit Vanilla JavaScript

// change ',' to '.'
document.getElementById('only_float').addEventListener('keypress', function(e){
    if (e.key === ','){
        // get old value
        var start = e.target.selectionStart;
        var end = e.target.selectionEnd;
        var oldValue = e.target.value;

        // replace point and change input value
        var newValue = oldValue.slice(0, start) + '.' + oldValue.slice(end)
        e.target.value = newValue;

        // replace cursor
        e.target.selectionStart = e.target.selectionEnd = start + 1;

        e.preventDefault();
    }
})
<input type="text" id="only_float" />
0