Ändern der Tastendruck

Question

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

Ich bin nicht so besorgt über eine Lösung, die in IE funktioniert - nur eine, die in Safari funktioniert, Chrome, & FF.

In Chrome kann ich sehen, dass ein Tastendruckereignis die Eigenschaften "charCode", "keyCode" und "which" hat, die alle die Tastenfolge-Ereignisnummer zugewiesen bekommen. Wenn ich ein Ereignis auf einen Tastendruck feuern, kann ich diese Werte ändern, aber ich kann nicht herausfinden, was zurückgegeben wird, so dass der tatsächliche Schlüssel, der getippt wird, unterschiedlich 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; 
}); 

kann ich auch sehen, dass zusammen mit charCode, die, und keyCode, gibt es auch eine „originalEvent“ Eigenschaft, die wiederum auch diese Eigenschaften hat. Ich war jedoch nicht in der Lage, diese zu ändern (ich versuchte es mit e.originalEvent.charCode = 102).

Answer 1

Sie können das mit einem Schlüsselereignis verknüpfte Zeichen oder Schlüssel nicht ändern oder ein Schlüsselereignis vollständig simulieren. Sie können jedoch den Tastendruck selbst ausführen und das gewünschte Zeichen manuell an der aktuellen Einfügemarke einfügen. Ich habe Code zur Verfügung gestellt, um dies an mehreren Stellen in Stack Overflow zu tun.Für ein contenteditable Element:

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

hier ein jsFiddle Beispiel: http://www.jsfiddle.net/Ukkmu/4/

für einen Eingang:

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

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

Kreuz-Browser jsFiddle Beispiel: http://www.jsfiddle.net/EXH2k/6/

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

Answer 2

Nun, was Sie für einen <input> oder <textarea> tun könnte, ist nur sicher, dass der Wert nicht alle darin „ein“ Zeichen hat:

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

Dieser Ansatz könnte wahrscheinlich nicht behandeln alle möglichen Tricks, die man mit etwas ziehen kann, das den "gepressten" Charakter wirklich austauscht, aber ich weiß nicht, wie ich das wirklich machen soll.

bearbeiten — oh, und der Grund, dass ich in diesem Beispiel mit dem „fixup“ geschieht in einem Timeout-Handler eingegeben ist, dass es dafür sorgt, dass der Browser die Möglichkeit hat, das native Verhalten für die „keypress“ zu handhaben Veranstaltung. Wenn der Timeout-Handler-Code ausgeführt wird, sind wir sicher, dass der Wert des Elements aktualisiert wurde. Es gibt einen Hauch von Cargo-Kult zu diesem Code, merke ich.

Answer 3

Ich bin mir nicht sicher, ob dies tun können, mit so etwas wie dieses „leicht“ ist:

$(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 ein Simulieren Plug-in-Tastendruck-Ereignisse usw., jQuery Simulate zu simulieren hat. Es könnte sich lohnen, zu untersuchen - auch möglicherweise eine Art von jQuery Trigger() Ereignis.

Answer 4

Meine Lösung Beispiel (Änderung in input[type=text] den Charakter ','-'.'):

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