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

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>

Answer 2

如果您正在使用 jquery，您可以这样做。

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

Answer 3

意识到这是一个较老的问题，现在仅将其作为一个选项提供，因为它可能比提取和组装文本区域值字符串的片段更有效，并且它会根据自动设置光标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' );

Answer 4

您可以使用下面由 Jamie Munro 编写的这 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);

Answer 5

这有点OT，但如果有人感兴趣：

简介：通过行和列将光标设置在输入元素内
依赖性：setSelectionRange() 来自@ashkan nasirzadeh

调用示例：setTextCursor(textarea,textarea.val, 0, 1);

// @brief: set cursor inside _input_ at position (column,row)
// @input: input DOM element. E.g. a textarea
// @content: textual content inside the DOM element
// @param row: starts a 0
// @param column: starts at 0    
function setTextCursor(input, content, row, column){
  // search row times: 
  var pos = 0;
  var prevPos = 0;
  for( var i = 0; (i<row) && (pos != -1); ++i){
      prevPos = pos;
      pos = content.indexOf("\n",pos+1);        
  }


  // if we can't go as much down as we want,
  //  go as far as worked
  if(-1 == pos){ pos = prevPos; }

  if(0 != row)
      ++pos; // one for the linebreak

  // prevent cursor from going beyond the current line
  var lineEndPos = content.indexOf("\n", pos+1);

  if((-1 != lineEndPos) && 
      (column > lineEndPos-pos)){
      // go *only* to the end of the current line
      pos = lineEndPos;
  } else{
      // act as usual
      pos += column
  }

  setSelectionRange(input, pos,pos);
}

Answer 6

通过JQuery:

    var cursorPos = $('#textarea').prop('selectionStart');
    $('#textarea').prop('selectionEnd',cursorPos-2);

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

Set text-cursor position in a textarea

javascript

textarea