어떻게 초안 JS

Question

에서 키 이벤트를 처리하기 위해, 나는 handleBeforeInput(str) 사용할 수 있습니다

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

을 내가 ENTER의 입력을 처리하는 경우, 내가 후크를 사용할 수 있습니다 handleReturn(e)

하지만 내가 어떻게 DELETE의 입력을 처리하고 싶다면 어떻게해야합니까?

Answer 1

당신은 다음과 같이 자바 스크립트의 keydown 이벤트를 사용 Delete 키를 검색 할 수 있습니다 :

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

초안 편집기 구성 요소는 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에 대한 자세한 내용을보실 수 있습니다.