Getting the position of the caret in textarea on click

Question

Suppose you have a textarea and a button, and that you wanted that button to get the position of the caret in a textarea, whenever that button was clicked. (I know, there would be a loss of focus from the text area to the button.)

Is there a way to recall where the caret was in the textarea? If so, how would one go about doing that (so that they could, for example, have said button write text to that area)?

Answer 1

This solution may help you. You can try out,

<html>
    <head>
      <title>Get/Set Caret in Textarea Example</title>
      <script>
          function doGetCaretPosition (ctrl) {
              var CaretPos = 0;
              // IE Support
             if (document.selection) {
                 ctrl.focus ();
                 var Sel = document.selection.createRange ();
                 Sel.moveStart ('character', -ctrl.value.length);    
                 CaretPos = Sel.text.length;
             }
             // Firefox support
             else if (ctrl.selectionStart || ctrl.selectionStart == '0')
                 CaretPos = ctrl.selectionStart;
             return (CaretPos);
         }

         function setCaretPosition(ctrl, pos)
         {
             if(ctrl.setSelectionRange)
             {
                 ctrl.focus();
                 ctrl.setSelectionRange(pos,pos);
             }
             else if (ctrl.createTextRange) {
                 var range = ctrl.createTextRange();
                 range.collapse(true);
                 range.moveEnd('character', pos);
                 range.moveStart('character', pos);
                 range.select();
            }
        }

        function process()
        { 
            var no = document.getElementById('no').value;
            setCaretPosition(document.getElementById('get'),no);
        }
    </script>
</head>
<body>
    <textarea id="get" name="get" rows="5" cols="31">Please write some integer in the textbox given below and press "Set Position" button. Press "Get Position" button to get the position of cursor.</textarea>
    <br>
    Enter Caret Position: <input type="text" id="no" size="1" /><input type="button" onclick="process();" value="Set Position">
    <BR>
    <input type="button" onclick="alert(doGetCaretPosition(document.getElementById('get')));"
            value="Get Position">
   </body>
</html>

Source: http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/

Answer 2

Get the position of caret when it loses focus:

var caretStart, caretEnd;

$('#textarea').on('blur', function(e) {
    caretStart = this.selectionStart;
    caretEnd = this.selectionEnd;
});

To write text when a button was click:

 $('#btnWriteText').on('click', function(e) {
    var text = " Example ";
    var $this = $('#textarea');

    // set text area value to: text before caret + desired text + text after caret
    $this.val($this.val().substring(0, caretStart)
              + text
              + $this.val().substring(caretEnd));

    // put caret at right position again
    this.selectionStart = this.selectionEnd = caretStart + text.length;
 });

Getting the position of the caret in textarea on click

Question

2 answers

solution1
2 ACCPTED 2015-02-20 01:59:36

solution2
2 2016-01-27 08:51:36

Getting the position of the caret in textarea on click

Question

2 answers

solution1 2 ACCPTED 2015-02-20 01:59:36

solution2 2 2016-01-27 08:51:36

solution1
2 ACCPTED 2015-02-20 01:59:36

solution2
2 2016-01-27 08:51:36