Set text cursor position in text field

Question

I am 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 fine, except for one thing, which is the position of the text cursor. When I click the boldText button, it sets the cursor position at the end of Textarea !!

In fact, I want to be able to set the cursor position with a specific index. I want something like this:

 txtarea.setFocusAt(20); 

Answer 1

After reorienting the text field using txtarea.focus() add this line:

 txtarea.selectionEnd= end + 7; 

This will set the cursor seven positions earlier than before, which will take into account [b][/b] .

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> 

Answer 2

if you use jquery you can do it like this.

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

Answer 3

Understanding that this is an old question is now offered only as an option for reflection, since it can be more efficient than extracting and assembling fragments of a string of textarea values, and it automatically sets the cursor based on the fourth argument to setRangeText and autofocus as well. It works in Firefox 66.0.02, and I have not tested it anywhere else. The cursor is placed after "[/ 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

You can use these 2 functions written below by Jamie Munro ( setSelectionRange() and 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 text area, you can get the following: setCaretToPos(document.getElementById('textarea'), -1);