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

Set text-cursor position in a textarea

本文关键字：位置 区域 文本 置文本 光标      更新时间：2023-09-26

我正在研究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);

使用 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>

如果你使用的是jquery，你可以这样做。

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

您可以使用下面由Jamie Munro（setSelectionRange()&setCaretToPos()编写的2个函数：

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);

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

通过 JQuery：

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

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

  • 简介：通过行和列在输入元素内设置光标
  • 依赖性：来自@ashkan纳西尔扎德的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);
}
相关文章：