Wie Schlüsselereignis in Draft js

Question

zu handhaben, wenn ich Eingabe von Zeichen behandeln möchten *, kann ich handleBeforeInput(str) verwenden:

handleBeforeInput(str) { 
    if (str !== '*') { 
     return false; 
    } 
    // handling 
    return true; 
} 

wenn ich Eingabe von ENTER zu handhaben will, kann ich den Haken verwenden handleReturn(e)

aber, wenn ich mit der Eingabe von DELETE umgehen möchte, wie zu tun?

Answer 1

können Sie erkennen Schlüssel von JavaScript löschen keydown Ereignis wie folgt:

var input_field = document.getElementById('your_text_field'); 
input_field.addEventListener('keydown', function() { 
    if (event.keyCode == 46) { //Here 46 is key-code of "Delete" key 
     //...your work when delete key pressed.. 
    } 
}); 

Hope, Sie benötigt diese.

Answer 2

Die Editor-Komponente von Draft verwendet eine optionale Stütze namens keyBindingFn. Wenn Sie ihm eine Funktion zuweisen, empfängt diese Funktion alle keyDown Ereignisse. Theoretisch könnten Sie in dieser Funktion alles tun, was Sie wollen, aber es liegt in der Verantwortung, einen Befehl vom Typ string zurückzugeben, der für einen bestimmten Schlüssel (oder eine Kombination von Schlüsseln) ausgeführt werden sollte. Es könnte wie folgt aussehen:

function keyBindingFn(e) { 
    if (e.key === 'Delete') { 
    return 'delete-me' // name this whatever you want 
    } 

    // This wasn't the delete key, so we return Draft's default command for this key 
    return Draft.getDefaultKeyBinding(e) 
} 

Die Editor Komponente nimmt auch eine andere optionale prop handleKeyCommand genannt. Wenn dieser Funktion eine Funktion zugewiesen ist, erhält sie alle Befehle, die im Editor ausgeführt werden. Dies bedeutet, dass es, wenn Sie mein Beispiel oben verwendet haben, den Befehl "delete-me" erhalten würde, wenn die Löschtaste gedrückt wird. Dies ist der Ort, um diesen Befehl zu behandeln.

function handleKeyCommand(command) { 
    if (command === 'delete-me') { 
    // Do what you want to here, then tell Draft that we've taken care of this command 
    return 'handled' 
    } 

    // This wasn't the 'delete-me' command, so we want Draft to handle it instead. 
    // We do this by telling Draft we haven't handled it. 
    return 'not-handled' 
} 

Um zu klären, können Sie diese Funktionen auf die Editor-Komponente wie folgt passieren:

<Editor 
    keyBindingFn={keyBindingFn} 
    handleKeyCommand={handleKeyCommand} 
    ... // other props 
/> 

Sie können in the Draft docs mehr darüber lesen.