CODEWITHSUNDEEP
javascriptjqueryhtml
Sachin
Sachin

Reputation: 1708

How to set cursor position in a textarea where I last inserted the text?

In a textarea I am doing two operations - one is finding current cursor position and second is to insert some text where the cursor is currently positioned. Note that this is not a case of mouse X/Y co-ordinates. In fact I am using character index number. Everything seems working pretty well except one issue. When I insert some text at current cursor position, after insertion of text the cursor goes to the end of string. I want to avoid this. Rather than this I want to keep my cursor at the end of the inserted text.

Here's my code:

$(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" />

For example, if my current cursor is at the beginning of string "This is a textarea." and you insert the text "test" then though the text is inserted at the beginning but cursor goes to the end of the entire string. Instead going to the end, it should stay just after text "test".

Upvotes: 2

Views: 4958

Answers (2)

Pedram
Pedram

Reputation: 16615

Simply use this selectionEnd and sum with txt_to_add length

$(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" />

Upvotes: 1

Nazmus Sakib
Nazmus Sakib

Reputation: 61

You need to re-position the cursor after inserting and focusing the textarea.

Try something like this after "$("#my_textarea").focus();" line

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

Upvotes: 1

Related Questions