Автофокус Texteare

Question

Всем привет. При установке курсора между двумя буквами в области textarea и последующем клике на элемент div добавляется буква между уже введенными ранее символами в textarea. Но при следующем клике на элемент div теряется ранее установленный фокус между элементами в textarea и символ добавляется в конец. Пробовал в textarea установить атрибут autofocus, но не помогло.

function handleClick(event){
    const action = event.target.dataset.action //Получаю keyCode   
    area.value=area.value.substring(0, area.selectionStart) + String.fromCharCode(action) + area.value.substring(area.selectionEnd, area.value.length);
}
    
let keys = document.getElementsByClassName("key");
  [...keys].forEach(item => item.addEventListener('click', handleClick)
)

<textarea name="screen" id="area" cols="30" rows="10" placeholder="Введите данные с клавиатуры" autofocus></textarea>

<div class="keyboard">
            <div class='line'>
                <div class="key" data-action="192">À</div> <!--data-action это keyCode на клавиатуре --> 
                <div class="key" data-action="49">1</div>
                <div class="key" data-action="50">2</div>
                <div class="key" data-action="51">3</div>
                <div class="key" data-action="52">4</div>
              </div>
 </div>

Answer 1

let keys = document.querySelectorAll('.key')
keys.forEach(el => el.addEventListener('click', handleClick));

function handleClick(event) {
  let oldSelectionStart = area.selectionStart;
  area.value = 
    area.value.substring(0, area.selectionStart) + 
    this.dataset.action +
    area.value.substring(area.selectionEnd, area.value.length);
  area.selectionStart = oldSelectionStart + 1;
  area.selectionEnd = oldSelectionStart + 1;
}

.key {
  border: 1px solid black;
  padding: 3px;
  display: inline;
}

<textarea name="screen" id="area" cols="30" rows="10" placeholder="Введите данные с клавиатуры" autofocus></textarea>
<br/>
<div class="key" data-action="A">A</div>
<div class="key" data-action="B">B</div>
<div class="key" data-action="C">C</div>

БЛОГ НА HUSL

Автофокус Texteare

Ответы (1 шт):