如何處理

Question

草案JS

關鍵事件，如果我要處理字符*的輸入，我可以用handleBeforeInput(str)：

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

如果我要處理的ENTER輸入，我可以使用掛鉤handleReturn(e)

但如果我想處理輸入DELETE，該怎麼辦？

Answer 1

您可以檢測使用JavaScript的​​事件，如下刪除鍵：

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.. 
    } 
}); 

希望，你需要這個。

Answer 2

Draft的編輯器組件採用一個可選的道具keyBindingFn。如果您爲其分配功能，該功能將接收所有keyDown事件。從理論上講，你可以在這個函數中做任何你想做的事情，但它的責任是返回應該爲特定鍵（或鍵的組合）執行的字符串類型的命令。它可能是這個樣子：

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) 
} 

的Editor組件還另需可選道具叫handleKeyCommand。如果爲此分配了一個功能，它將接收在編輯器中執行的所有命令。這意味着，如果您使用上面的示例，只要按下刪除鍵，就會收到「delete-me」命令。這是處理該命令的地方。

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' 
} 

爲了澄清，你通過這些功能的編輯器組件這樣的：

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

你可以閱讀更多關於它in the Draft docs。