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

Posted 2023-05-07

【中文标题】在文本区域中设置文本光标位置

【英文标题】：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);

【问题讨论】：

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

【参考方案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);