How to focus cursor in specific point in textarea using js?

Question

I am trying to create "quicklink" option in textarea using which users can insert html tags by directly clicking over them. It is working fine but after I click any quicklink button the cursor moves to the end of the text present in the textarea.

How to keep/focus cursor just after the inserted tag?

function quicklink(link){
  var cursorPos= $("#txtarea").prop('selectionStart');
  var v= $("#txtarea").val();
  var textBefore= v.substring(0, cursorPos);
  var textAfter= v.substring(cursorPos,v.length);
  $("#txtarea").val(textBefore + link + textAfter);
  $("#txtarea").focus();
}

<!--index.php -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

    <!DOCTYPE html>
      <html>
      <head>
      <title>QuickLink</title>
      <meta charset="UTF-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="jquery.min.js"></script><script src="quicklink.js"></script> 
      <script>
        $(document).ready(function() {
          $("#txtarea").keyup(function(){
            var txt = $("#txtarea").val(); 
            var len = txt.length;
            $("#count").html("Word Count: " + len );
          });
        });
      </script>
     </head>
     <body>
       <div class="text_top">
         <input type="submit" onClick="quicklink('<div>')" value="<div>" >
         <input type="submit"  onClick="quicklink('</div>')" value="</div>">
         <input type="submit"  onClick="quicklink('<span>')"  value="<span>" >
         <input type="submit"  onClick="quicklink('</span>')"  value="</span>" >
         <input type="submit"  onClick="quicklink('<B>')"  value="<B>" >
         <input type="submit" onClick="quicklink('<I>')"   value="<I>" >
         <input type="submit"  onClick="quicklink('<U>')"  value="<U>" >
         <input type="submit"  onClick="quicklink('<ul>')"   value="<ul>" >
         <input type="submit"  onClick="quicklink('<li>')"   value="<li>" >
         <input type="submit"  onClick="quicklink('<sup>')"   value="<sup>" >
         <input type="submit"  onClick="quicklink('<sub>')"   value="<sub>" >
         <input type="submit"  onClick="quicklink('<strike>')"   value="<strike>">
       </div>
       <textarea id="txtarea" class="textarea"></textarea><div id="test">
    </div>
    <div id="count" class="text_down">Word Count: 0</div>
  </body>
</html>

I'm extremely sorry. I tried my best to format the code but failed. I will improve next time. — Best Bibek, Sep 21 '18 at 04:53
You mean when you clicked `
` for example then it will return `
[cursor]`? — dcangulo, Sep 21 '18 at 05:01
Yes like you said, when
is clicked I want the
[cursor] but it is not happening now. — Best Bibek, Sep 21 '18 at 05:06

score 0 · Answer 1 · answered Sep 21 '18 at 05:03

You can get current cursor position by using following solution:

https://stackoverflow.com/a/1909997/7676742

And increment it by the length of your new added html tag (for instance 3 for <a>) and set position of cursor by using following solution:

https://stackoverflow.com/a/49750025/7676742

score 0 · Accepted Answer · answered Sep 21 '18 at 05:11

function quicklink(link){
  var cursorPos= $("#txtarea").prop('selectionStart');
  var v= $("#txtarea").val();
  var textBefore= v.substring(0, cursorPos);
  var textAfter= v.substring(cursorPos,v.length);
  $("#txtarea").val(textBefore + link + textAfter);
  $("#txtarea").focus();
}
// Getting closest number for array
// https://stackoverflow.com/questions/8584902/get-closest-number-out-of-array
function closest (num, arr) {
                var curr = arr[0];
                var diff = Math.abs (num - curr);
                for (var val = 0; val < arr.length; val++) {
                    var newdiff = Math.abs (num - arr[val]);
                    if (newdiff < diff) {
                        diff = newdiff;
                        curr = arr[val];
                    }
                }
                return curr;
            }
$('#txtarea').click(function(){
 var str = $(this).val();
 var regex = /\<([a-zA-Z\/]+\>)/gi, result, indices = [];
 // Getting positions as array
 // https://stackoverflow.com/questions/3410464/how-to-find-indices-of-all-occurrences-of-one-string-in-another-in-javascript
  while ( (result = regex.exec(str)) ) {
      indices.push(result.index);
  }
  var cursorPosition = $(this).prop("selectionStart");
  $(this).prop('selectionEnd');
  
  var closestPosition = closest(cursorPosition,indices)
  
  
  $(this).prop('selectionEnd', closestPosition);
})

<!--index.php -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

    <!DOCTYPE html>
      <html>
      <head>
      <title>QuickLink</title>
      <meta charset="UTF-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="jquery.min.js"></script><script src="quicklink.js"></script> 
      <script>
        $(document).ready(function() {
          $("#txtarea").keyup(function(){
            var txt = $("#txtarea").val(); 
            var len = txt.length;
            $("#count").html("Word Count: " + len );
          });
        });
      </script>
     </head>
     <body>
       <div class="text_top">
         <input type="submit" onClick="quicklink('<div>')" value="<div>" >
         <input type="submit"  onClick="quicklink('</div>')" value="</div>">
         <input type="submit"  onClick="quicklink('<span>')"  value="<span>" >
         <input type="submit"  onClick="quicklink('</span>')"  value="</span>" >
         <input type="submit"  onClick="quicklink('<B>')"  value="<B>" >
         <input type="submit" onClick="quicklink('<I>')"   value="<I>" >
         <input type="submit"  onClick="quicklink('<U>')"  value="<U>" >
         <input type="submit"  onClick="quicklink('<ul>')"   value="<ul>" >
         <input type="submit"  onClick="quicklink('<li>')"   value="<li>" >
         <input type="submit"  onClick="quicklink('<sup>')"   value="<sup>" >
         <input type="submit"  onClick="quicklink('<sub>')"   value="<sub>" >
         <input type="submit"  onClick="quicklink('<strike>')"   value="<strike>">
       </div>
       <textarea id="txtarea" class="textarea"></textarea><div id="test">
    </div>
    <div id="count" class="text_down">Word Count: 0</div>
  </body>
</html>

Thanks, but I figured out an easier option from https://stackoverflow.com/a/1909997/7676742 — Best Bibek, Sep 21 '18 at 05:31

score 0 · Answer 3 · answered Sep 21 '18 at 05:39

I found an easy way to do this:

function quicklink(link){
  var linklen=link.length;
  var cursorPos= $("#txtarea").prop('selectionStart');
  var v= $("#txtarea").val();
  var textBefore= v.substring(0, cursorPos);
  var textAfter= v.substring(cursorPos,v.length);
  $("#txtarea").val(textBefore + link + textAfter);
  $("#txtarea").prop('selectionEnd', cursorPos+linklen);
  $("#textarea").focus();         
}

How to focus cursor in specific point in textarea using js?

3 Answers3