Есть кнопка javascript, которая при нажатии вставляет строку. Затем после нажатия кнопки фокус вернется в текстовое поле. Однако в моем коде фокус всегда возвращается к концу строки, а не к тому месту, где он был.

Например, теперь фокус между 3 и 4.

enter image description here

И после нажатия «ā» фокус переходит на цифру 7.

enter image description here

Но я хочу, чтобы фокус был между «а» и 4.

Вот мой код

<script>
function addTF(str)
{
    var area = document.getElementById('pronounce');
    area.value = area.value.substr(0, area.selectionStart)
    + str
    + area.value.substr(area.selectionStart);
    area.focus();
}
</script>

<input type="text" id="pronounce" name="pronounce">
<input type="button" value="ā" onClick="addTF(this.value)">

Итак, как я могу этого добиться? Спасибо.

3
Tieria 15 Июн 2020 в 10:09

1 ответ

Лучший ответ

Вы можете установить selectionStart и selectionEnd текстового поля, чтобы восстановить предыдущую позицию курсора:

var addTF;

window.addEventListener('load', () => {
    var area = document.getElementById('pronounce');
    var lastPos = 0;
    
    area.addEventListener('change', () => lastPos = area.selectionStart);
    area.addEventListener('click', () => lastPos = area.selectionStart);

    addTF = function(str) {
        area.value = area.value.substr(0, area.selectionStart) + str + area.value.substr(area.selectionStart);
        lastPos++;
        area.selectionStart = lastPos;
        area.selectionEnd = lastPos;
        area.focus();
    }
});
<input type="text" id="pronounce" name="pronounce">
<input type="button" value="ā" onClick="addTF(this.value)">
3
Hao Wu 15 Июн 2020 в 08:04