@romankononovich

Как в react js по нажатию tab установить в нужное место каретку input-а?

Есть input с ключевыми словами, как можно перемещать каретку нажатием tab-a между ключевыми словами?

Пробовал отлавливать event tab-a и ставить элементу .focus(), но не работает.
  • Вопрос задан
  • 403 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
onKeyDown = e => {
  if (e.key === 'Tab') {
    e.preventDefault();

    const
      input = e.target,
      str = input.value,
      currPos = input.selectionStart,
      wordEnd = str.slice(currPos).search(/[^\w]/);

    let pos = str.slice(currPos + wordEnd).search(/[^\s]/);
    if (pos) {
      pos += currPos + wordEnd;
    }
    if (pos === currPos) {
      pos = 0;
    }

    input.setSelectionRange(pos, pos);
  }
}

<input value={this.state.str} onKeyDown={this.onKeyDown} />

https://jsfiddle.net/acvjhxyt/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы