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按钮时，它将光标位置设置在Textarea !!

的末尾

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

txtarea.setFocusAt(20);

Answer 1

使用txtarea.focus()重新聚焦textarea后，添加以下行：

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

意识到这是一个较旧的问题，现在仅作为可供选择的选项提供，因为它可能比提取和组合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' );

Answer 4

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

示例：

例如，如果要在文本区域的末尾设置插入符号，可以使用以下命令： setCaretToPos(document.getElementById('textarea'), -1);

Answer 5

这有点旧，但是如果有人感兴趣的话：

简介：将光标设置在输入元素中，穿过行和列
依赖性：来自{@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);
}

Answer 6

通过JQuery：

data <- data.frame()
for (file in files){

  name = strsplit(file, split = "\\.")[[1]][1]

  data <- data %>% bind_rows(read_delim(file = file, delim = ";", col_types = cols(
    a = col_double(),
    b = col_double(),
    )) %>% mutate(name = name))
}

在textarea中设置文本光标位置

6 个答案: