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

Answer 1

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>

Answer 2

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

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