Установить положение текстового курсора в текстовом поле

Я работаю над редактором BBCode, и вот код:

var txtarea = document.getElementById("editor_area");

            function boldText() {
                var start = txtarea.selectionStart;
                var end = txtarea.selectionEnd;
                var sel = txtarea.value.substring(start, end);
                var finText = txtarea.value.substring(0, start) + '[b]' + sel + '[/b]' + txtarea.value.substring(end);
                txtarea.value = finText;
                txtarea.focus();
            }

Все в порядке, кроме одной вещи, которая является позицией текстового курсора. Когда я нажимаю кнопку boldText, она устанавливает позицию курсора в конце Textarea!!

На самом деле, я хочу иметь возможность установить позицию курсора с определенным индексом. Я хочу что-то вроде этого:

txtarea.setFocusAt(20);

Ответ 1

После переориентации текстового поля с помощью txtarea.focus() добавьте эту строку:

txtarea.selectionEnd= end + 7;

Это установит курсор на семь позиций раньше, чем раньше, что будет учитывать [b][/b].

Пример

document.getElementById('bold').addEventListener('click', boldText);

function boldText() {
  var txtarea = document.getElementById("editor_area");
  var start = txtarea.selectionStart;
  var end = txtarea.selectionEnd;
  var sel = txtarea.value.substring(start, end);
  var finText = txtarea.value.substring(0, start) + '[b]' + sel + '[/b]' + txtarea.value.substring(end);
  txtarea.value = finText;
  txtarea.focus();
  txtarea.selectionEnd= end + 7;
}

#editor_area {
  width: 100%;
  height: 10em;
}

<button id="bold">B</button>
<textarea id="editor_area"></textarea>

Ответ 2

если вы используете jquery, вы можете сделать это так.

$('textarea').prop('selectionEnd', 13);

Ответ 3

Понимание того, что это старый вопрос, теперь предлагается только как вариант для размышления, поскольку он может быть более эффективным, чем извлечение и сборка фрагментов строки значения textarea, и он автоматически устанавливает курсор на основе четвертого аргумента setRangeText и автофокусировка также. Он работает в Firefox 66.0.02, и я не проверял его где-либо еще. Курсор ставится после "[/b]".

 t = document.getElementById("editor_area");
 b = t.selectionStart,
 e = t.selectionEnd + 3; // length of '[b]'

 t.setSelectionRange( b, b );
 t.setRangeText( '[b]' );
 t.setSelectionRange( e, e );
 t.setRangeText( '[/b]', e, e, 'end' );

Ответ 4

Вы можете использовать эти 2 функции, написанные ниже Джейми Мунро (setSelectionRange() и setCaretToPos()):

function setSelectionRange(input, selectionStart, selectionEnd) {
    if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
    }
    else if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    }
}

function setCaretToPos (input, pos) {
       setSelectionRange(input, pos, pos);
}

ПРИМЕР:

например, если вы хотите установить каретку в конце вашей текстовой области, вы можете получить следующее: setCaretToPos(document.getElementById('textarea'), -1);