Как установить позицию курсора в текстовой области, где я последний раз вставлял текст?

Question

В textarea я делаю две операции - одна находит текущую позицию курсора, а вторая - вставить некоторый текст там, где курсор находится в данный момент. Обратите внимание, что это не случай мышиных координат X / Y. На самом деле я использую номер индекса. Кажется, все работает довольно хорошо, кроме одного вопроса. Когда я вставляю некоторый текст в текущую позицию курсора, после вставки текста курсор переходит в конец строки. Я хочу избежать этого. Вместо этого я хочу держать курсор в конце вставленного текста.

Вот мой код:

$(document).ready(function() {
  // Get current cursor position
  $("#btngetcurpos").click(function() {
    var cursor_pos = $("#my_textarea").prop('selectionStart');
    alert(cursor_pos);
    $("#my_textarea").focus();
  });

  // Insert text at current cursor position
  $("#btnsettxt").click(function() {
    var cursor_pos = $("#my_textarea").prop('selectionStart');
    var textarea_txt = $("#my_textarea").val();
    var txt_to_add = "test";
    $("#my_textarea").val(textarea_txt.substring(0, cursor_pos) + txt_to_add + textarea_txt.substring(cursor_pos));
    $("#my_textarea").focus();
  });
});

#my_textarea {
  border: 1px solid red;
  width: 300px;
  height: 100px;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<textarea id="my_textarea" autofocus>This is a textarea.</textarea>

<br /><br />

<input type="button" id="btngetcurpos" value="Get Cursor Position" />

<input type="button" id="btnsettxt" value="Insert Text" />

Например, если мой текущий курсор находится в начале строки «Это текстовая область». и затем вы вставляете текст «test», хотя текст вставляется в начале, но курсор идет до конца всей строки. Вместо того, чтобы идти до конца, он должен оставаться сразу после текста «test».

Answer 1

Просто используйте это selectionEnd и суммируйте с txt_to_add длина

$(document).ready(function() {

  // Get current cursor position
  $("#btngetcurpos").click(function() {
    var cursor_pos = $("#my_textarea").prop('selectionStart');
    alert(cursor_pos);
    $("#my_textarea").focus();
  });

  // Insert text at current cursor position
  $("#btnsettxt").click(function() {
    var cursor_pos = $("#my_textarea").prop('selectionStart');
    var textarea_txt = $("#my_textarea").val();
    var txt_to_add = "test";
    $("#my_textarea").val(textarea_txt.substring(0, cursor_pos) + txt_to_add + textarea_txt.substring(cursor_pos));
    $("#my_textarea").focus();
    $('#my_textarea').prop('selectionEnd', cursor_pos + txt_to_add.length);

  });
});

#my_textarea {
  border: 1px solid red;
  width: 300px;
  height: 100px;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<textarea id="my_textarea" autofocus>This is a textarea.</textarea>

<br /><br />

<input type="button" id="btngetcurpos" value="Get Cursor Position" />

<input type="button" id="btnsettxt" value="Insert Text" />

Answer 2

Вам нужно переместить курсор после вставки и фокусировки текстовой области.

Попробуйте что-то вроде этого после "$ (" # my_textarea "). Focus ();" линия

$("#my_textarea").prop('selectionEnd',cursor_pos + txt_to_add.length);