添加文本后，将光标置于文本区域的末尾

Question

I'm trying to make a button to give a comment on someone's profile page. The JavaScript now adds the '@username' to the text area so some kind of mention is made. This works very well. The only problem is, that when I try to focus to the text area after the mention has been added, the cursor is put in before of the text, and not after.

<a style="cursor: pointer;" class="pull-right"onclick='document.getElementById("comment").value = "@username"; document.section.comment.focus();'>Click to comment</a>

And for the text area

<textarea id="comment" name="comment" class="form-control" type="text" rows="4" placeholder="Write comment here" ></textarea>

 <a style="cursor: pointer;" class="pull-right" onclick='document.getElementById("comment").value = "@username "; document.section.comment.focus();'>Click to comment</a> <br><br> <form action='' method="POST" name="section"> <textarea id="comment" name="comment" class="form-control" type="text" rows="4" placeholder="Write your comment" ></textarea><!-- <p id="reageer_op"></p> --> </form> 

I'd like to keep it as simple as possible.

Is there a solution without jQuery? I found this solution with jQuery here https://css-tricks.com/snippets/jquery/mover-cursor-to-end-of-textarea/

Answer 1

I've found the solution myself, add the following to the script of the button

document.section.comment.setSelectionRange(document.section.comment.value.length,document.section.comment.value.length);

 <a style="cursor: pointer;" class="pull-right" onclick='document.getElementById("comment").value = "@username "; document.section.comment.focus();document.section.comment.setSelectionRange(document.section.comment.value.length,document.section.comment.value.length);'>Click to comment</a> <br><br> <form action='' method="POST" name="section"> <textarea id="comment" name="comment" class="form-control" type="text" rows="4" placeholder="Write your comment" ></textarea><!-- <p id="reageer_op"></p> --> </form> 

This did the trick! Thanks anyways!