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

【问题标题】：Set text-cursor position in a textarea在文本区域中设置文本光标位置
【发布时间】：2016-04-30 07:41:35
【问题描述】：

我正在开发一个 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();
}

一切都很好，除了一件事是文本光标的位置。当我单击粗体文本按钮时，它将光标位置设置在文本区域的末尾！

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

txtarea.setFocusAt(20);

【问题讨论】：

这里已经回答了：stackoverflow.com/questions/499126/…

标签： javascript textarea

【解决方案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】：

您可以使用下面Jamie Munro (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);
}

示例：

例如，如果您想在 textarea 的末尾设置插入符号，您可以这样： setCaretToPos(document.getElementById('textarea'), -1);

【讨论】：

【解决方案4】：

意识到这是一个较老的问题，现在仅将其作为一个选项来考虑，因为它可能比提取和组装 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' );

【讨论】：

【解决方案5】：

通过 JQuery：

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

【讨论】：

【解决方案6】：

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

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

示例调用：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);
}

【讨论】：