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

Question

[romankononovich]

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

Пробовал отлавливать event tab-a и ставить элементу .focus(), но не работает.

Comments

[Demian Smith]

Стандартное поведение браузера по табуляции - это перевод фокуса на следующий элемент. Такое поведение особенно важно для людей с ограниченными физическими возможностями (слабовидящие, слепые, люди с нарушенной координацией).

Технически реализовать описанный функционал вполне возможно (ниже уже подсказали как), но по этическим и эстетическим соображениям желательно избегать модерации стандартной работы браузера.

Answer 1

[0xD34F]

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/