javascript - 在文本区域中设置文本光标位置

Question

我正在开发 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 按钮时，它会将光标位置设置在文本区域的末尾!!

其实，我希望能够将光标位置设置在某个索引处。我想要这样的东西:

txtarea.setFocusAt(20);

Answer 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>