2016-12-04 8 views
-1

, если я хочу, чтобы обрабатывать ввод символа *, я могу использовать handleBeforeInput(str):Как обрабатывать событие нажатия клавиши в проекте JS

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

, если я хочу, чтобы обрабатывать ввод ENTER, я могу использовать крюк handleReturn(e)

, но если я хочу обрабатывать ввод DELETE, как это сделать?

+0

Пожалуйста, добавьте более подробную информацию на ваш вопрос. – nmnsud

ответ

0

Вы можете обнаружить Удалить ключ, используя keydown событие в 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.. 
    } 
}); 

Надежда, вам это было нужно.

+0

Спасибо вам большое! Но мне интересно, есть ли способ обработки удаления в жизненном цикле черновика. –

7

Компонент Draft's Editor имеет дополнительную опцию, называемую keyBindingFn. Если вы назначите ему функцию, эта функция получит все события keyDown. Теоретически вы можете делать все, что захотите, в этой функции, но его обязанность заключается в том, чтобы вернуть команду команды типа string, которая должна быть выполнена для определенного ключа (или комбинации клавиш). Это может выглядеть примерно так:

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.

+0

Это должен быть признанный ответ! – asubanovsky

 Смежные вопросы

  • Нет связанных вопросов^_^