Поместить курсор в конец текстовой области после добавления текста

Question

Я пытаюсь сделать кнопку, чтобы комментировать чью-то страницу профиля. JavaScript теперь добавляет «@username» в текстовую область, так что делается какое-то упоминание. Это работает очень хорошо. Единственная проблема состоит в том, что когда я пытаюсь сфокусироваться на текстовой области после добавления упоминания, курсор помещается перед текстом, а не после.

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

А для текстовой области

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

Я бы хотел сделать это как можно более простым.

Есть ли решение без jQuery? Я нашел это решение с помощью jQuery здесь https://css -tricks.com / snippets / jquery / mover-cursor-to-end-of-textarea /

Answer 1

Я сам нашел решение, добавив следующее в скрипт кнопки

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>

Это добилось цели! В любом случае, спасибо!