Set text-cursor position in a textarea

Question

I'm working on a BBCode editor and here is the code:

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

Everything is OK except one thing which is the position of the text-cursor. When I click on the boldText button, it sets the cursor position at the end of the Textarea!!

Actually, I want to be able to set the cursor position at a certain index. I want something like this:

txtarea.setFocusAt(20);

This has already been answered here: http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area — michael, Jan 23 '16 at 20:06

score 67 · Accepted Answer · answered Jan 23 '16 at 20:07

After refocusing the textarea with txtarea.focus(), add this line:

txtarea.selectionEnd= end + 7;

That will set the cursor seven positions ahead of where it was previously, which will take [b][/b] into account.

Example

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>

score 19 · Answer 2 · answered Apr 10 '18 at 09:25

19

if you are using jquery you can do it like this.

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

answered Apr 10 '18 at 09:25

Mubashar Abbas

5,536
4
38
49

score 6 · Answer 3 · answered Jun 20 '19 at 11:12

you can use these 2 functions below written by 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);
}

EXAMPLE:

for example, if you want to set the caret at the end of your textarea you can have this: setCaretToPos(document.getElementById('textarea'), -1);

score 3 · Answer 4 · answered Apr 11 '19 at 20:35

Realizing this is an older question, this is offered only as something to think about as an option now because it may likely be more efficient than extracting and assembling pieces of the textarea value string, and it sets the cursor automatically based on the fourth argument of setRangeText and autofocuses also. It works in Firefox 66.0.02 and I haven't tested it elsewhere. The cursor is placed after the '[/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' );

score 1 · Answer 5 · answered Apr 05 '20 at 20:29

1

Through JQuery:

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

answered Apr 05 '20 at 20:29

Ranjeet

49
3

score 0 · Answer 6 · answered Dec 17 '19 at 03:15

This is a little OT, but if anyone is interested:

Brief: Set cursor inside input element throug row and column
Dependency: setSelectionRange() from @ashkan nasirzadeh

Example call: 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);
}

Set text-cursor position in a textarea

6 Answers6

Linked