Inserting a text where cursor is using Javascript jquery

Question

I have a page with  a lot of textboxes  When someone clicks a link  i want a word or two to be inserted where the cursor is  or appended to the textbox which has the focus   For example  if the cursor focus is on a textbox saying  apple  and he clicks a link saying   email    then i want the textbox to say   apple bob example com    How can I do this  Is this even possible  since what if the focus is on a radio dropdown non textbox element  Can the last focused on textbox be remembered

User · Answer

The approved answer from George Claghorn worked great for simply inserting text at the cursor position. If the user had selected text though, and you want that text to be replaced (the default experience with most text), you need to make a small change when setting the 'back' variable.

Also, if you don't need to support older versions of IE, modern versions support textarea.selectionStart, so you can take out all of the browser detection, and IE-specific code.

Here is a simplified version that works for Chrome and IE11 at least, and handles replacing selected text.

function insertAtCaret(areaId, text) {
    var txtarea = document.getElementById(areaId);
    var scrollPos = txtarea.scrollTop;
    var caretPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0, caretPos);
    var back = (txtarea.value).substring(txtarea.selectionEnd, txtarea.value.length);
    txtarea.value = front + text + back;
    caretPos = caretPos + text.length;
    txtarea.selectionStart = caretPos;
    txtarea.selectionEnd = caretPos;
    txtarea.focus();
    txtarea.scrollTop = scrollPos;
}

User · Answer

The accepted answer didn t work for me on Internet Explorer 9  I checked it and the browser detection was not working properly  it detected ff  firefox  when i was at Internet Explorer   I just did this change    if    browser msie     Instead of   if  br     ie        The resulting code is this one   function insertAtCaret areaId text        var txtarea   document getElementById areaId       var scrollPos   txtarea scrollTop      var strPos   0      var br     txtarea selectionStart    txtarea selectionStart     0               ff     document selection    ie    false           if    browser msie             txtarea focus            var range   document selection createRange            range moveStart   character   -txtarea value length           strPos   range text length            else if  br     ff   strPos   txtarea selectionStart       var front    txtarea value  substring 0 strPos         var back    txtarea value  substring strPos txtarea value length        txtarea value front text back      strPos   strPos   text length      if  br     ie              txtarea focus            var range   document selection createRange            range moveStart   character   -txtarea value length           range moveStart   character   strPos           range moveEnd   character   0           range select              else if  br     ff             txtarea selectionStart   strPos          txtarea selectionEnd   strPos          txtarea focus              txtarea scrollTop   scrollPos

User · Answer

How to insert some Text to current cursor position of a TextBox through JQuery and JavaScript  Process   Find the Current Cursor Position Get the Text to be Copied Set the Text Over there Update the Cursor position    Here I have 2 TextBoxes and a Button  I have to Click on a certain position on a textbox and then click on the button to paste the text from the  other textbox to the the position of the previous textbox   Main issue here is that getting the current cursor position where we will paste the text     Textbox on which to be pasted  lt input type  text  id  txtOnWhichToBePasted    gt     Textbox from where to be pasted  lt input type  text  id  txtFromWhichToBePasted    gt      Button on which click the text to be pasted  lt input type  button  id  btnInsert  value  Insert   gt     lt script type  text javascript  gt     document  ready function              btnInsert   bind  click   function                  var TextToBePasted       txtFromWhichToBePasted   value              var ControlOnWhichToBePasted       txtOnWhichToBePasted                   Paste the Text             PasteTag ControlOnWhichToBePasted  TextToBePasted                          Function Pasting The Text function PasteTag ControlOnWhichToBePasted TextToBePasted          Get the position where to be paste      var CaretPos   0         IE Support     if  document selection             ControlOnWhichToBePasted focus            var Sel   document selection createRange             Sel moveStart  character   -ctrl value length            CaretPos   Sel text length               Firefox support     else if  ControlOnWhichToBePasted selectionStart    ControlOnWhichToBePasted selectionStart     0           CaretPos   ControlOnWhichToBePasted selectionStart         paste the text     var WholeString   ControlOnWhichToBePasted value      var txt1   WholeString substring 0  CaretPos       var txt2   WholeString substring CaretPos  WholeString length       WholeString   txt1   TextToBePasted   txt2      var CaretPos   txt1 length   TextToBePasted length      ControlOnWhichToBePasted value   WholeString         update The cursor position      setCaretPosition ControlOnWhichToBePasted  CaretPos      function setCaretPosition ControlOnWhichToBePasted  pos         if  ControlOnWhichToBePasted setSelectionRange            ControlOnWhichToBePasted focus            ControlOnWhichToBePasted setSelectionRange pos  pos             else if  ControlOnWhichToBePasted createTextRange            var range   ControlOnWhichToBePasted createTextRange            range collapse true           range moveEnd  character   pos           range moveStart  character   pos           range select              lt  script gt

User · Answer

Use this  from here    x000D   x000D  function insertAtCaret areaId  text    x000D    var txtarea   document getElementById areaId   x000D    if   txtarea    x000D      return  x000D      x000D   x000D    var scrollPos   txtarea scrollTop  x000D    var strPos   0  x000D    var br     txtarea selectionStart    txtarea selectionStart     0     x000D       ff     document selection    ie    false    x000D    if  br     ie     x000D      txtarea focus    x000D      var range   document selection createRange    x000D      range moveStart  character   -txtarea value length   x000D      strPos   range text length  x000D      else if  br     ff     x000D      strPos   txtarea selectionStart  x000D      x000D   x000D    var front    txtarea value  substring 0  strPos   x000D    var back    txtarea value  substring strPos  txtarea value length   x000D    txtarea value   front   text   back  x000D    strPos   strPos   text length  x000D    if  br     ie     x000D      txtarea focus    x000D      var ieRange   document selection createRange    x000D      ieRange moveStart  character   -txtarea value length   x000D      ieRange moveStart  character   strPos   x000D      ieRange moveEnd  character   0   x000D      ieRange select    x000D      else if  br     ff     x000D      txtarea selectionStart   strPos  x000D      txtarea selectionEnd   strPos  x000D      txtarea focus    x000D      x000D   x000D    txtarea scrollTop   scrollPos  x000D    x000D   lt textarea id  textareaid  gt  lt  textarea gt  x000D   lt a href     onclick  insertAtCaret  textareaid    text to insert   return false   gt Click Here to Insert lt  a gt  x000D   x000D   x000D

User · Answer

using  quick sliv answer   function insertAtCaret el  text        var caretPos   el selectionStart      var textAreaTxt   el value      el value   textAreaTxt substring 0  caretPos    text   textAreaTxt substring caretPos

User · Answer

The code above didn t work for me in IE  Here s some code based on this answer   I took out the getElementById so I could reference the element in a different way    x000D   x000D  function insertAtCaret element  text    x000D    if  document selection    x000D      element focus    x000D      var sel   document selection createRange    x000D      sel text   text  x000D      element focus    x000D      else if  element selectionStart    element selectionStart     0    x000D      var startPos   element selectionStart  x000D      var endPos   element selectionEnd  x000D      var scrollTop   element scrollTop  x000D      element value   element value substring 0  startPos    x000D        text   element value substring endPos  element value length   x000D      element focus    x000D      element selectionStart   startPos   text length  x000D      element selectionEnd   startPos   text length  x000D      element scrollTop   scrollTop  x000D      else   x000D      element value    text  x000D      element focus    x000D      x000D    x000D  input width 100px  x000D  label display block margin 10px 0  x000D   lt label for  in2copy  gt Copy text from   lt input id  in2copy  type  text  value  x  gt  lt  label gt  x000D   lt label for  in2ins  gt Element to insert   lt input id  in2ins  type  text  value  1 2 3  autofocus gt  lt  label gt  x000D   lt button onclick  insertAtCaret document getElementById  in2ins   document getElementById  in2copy   value   gt Insert lt  button gt  x000D   x000D   x000D    EDIT  Added a running snippet  jQuery is not being used

User · Answer

Maybe a shorter version  would be easier to understand     x000D   x000D      jQuery   btn   on  click   function     x000D          var  txt   jQuery   txt    x000D          var caretPos    txt 0  selectionStart  x000D          var textAreaTxt    txt val    x000D          var txtToAdd    stuff   x000D           txt val textAreaTxt substring 0  caretPos    txtToAdd   textAreaTxt substring caretPos     x000D          x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   x000D   lt textarea id  txt  rows  15  cols  70  gt There is some text here  lt  textarea gt  x000D   lt input type  button  id  btn  value  OK    gt  x000D   x000D   x000D    I wrote this in response to How to add a text to a textbox from the current position of the pointer with jquery

User · Answer

Adding text to current cursor position involves two steps    Adding the text at the current cursor position    Updating the current cursor position   Demo   https   codepen io anon pen qZXmgN  Tested in Chrome 48   Firefox 45  IE 11 and Edge 25  JS   function addTextAtCaret textAreaId  text        var textArea   document getElementById textAreaId       var cursorPosition   textArea selectionStart      addTextAtCursorPosition textArea  cursorPosition  text       updateCursorPosition cursorPosition  text  textArea     function addTextAtCursorPosition textArea  cursorPosition  text        var front    textArea value  substring 0  cursorPosition       var back    textArea value  substring cursorPosition  textArea value length       textArea value   front   text   back    function updateCursorPosition cursorPosition  text  textArea        cursorPosition   cursorPosition   text length      textArea selectionStart   cursorPosition      textArea selectionEnd   cursorPosition      textArea focus            HTML    lt div gt       lt button type  button  onclick  addTextAtCaret  textArea   Apple    gt Insert Apple  lt  button gt       lt button type  button  onclick  addTextAtCaret  textArea   Mango    gt Insert Mango  lt  button gt       lt button type  button  onclick  addTextAtCaret  textArea   Orange    gt Insert Orange  lt  button gt   lt  div gt   lt textarea id  textArea  rows  20  cols  50  gt  lt  textarea gt

User · Answer

This question s answer was posted so long ago and I stumbled upon it via a Google search  HTML5 provides the HTMLInputElement API that includes the setRangeText   method  which replaces a range of text in an  lt input gt  or  lt textarea gt  element with a new string   element setRangeText  abc      The above would replace the selection made inside element with abc  You can also specify which part of the input value to replace   element setRangeText  abc   3  5     The above would replace the 4th till 6th characters of the input value with abc  You can also specify how the selection should be set after the text has been replaced by providing one of the following strings as the 4th parameter     preserve  attempts to preserve the selection  This is the default   select  selects the newly inserted text   start  moves the selection to just before the inserted text   end  moves the selection to just after the inserted text    Browser compatibility  The MDN page for setRangeText doesn t provide browser compatibility data  but I guess it d be the same as HTMLInputElement setSelectionRange    which is basically all modern browsers  IE 9 and above  Edge 12 and above

User · Answer

Content Editable  HTML or any other DOM element Selections  If you are trying to insert at caret on a  lt div contenteditable  true  gt   this becomes much more difficult  especially if there are children within the editable container   I have had really great luck using the Rangy library     GIT  https   github com timdown rangy NPM  https   www npmjs com package rangy   It has a ton of great features such as    Save Position or Selection Then later  Restore the Position or Selection Get selection HTML or Plaintext Among many others   The online demo was not working last I checked  however the repo has working demos   To get started  simple download the Repo from Git or NPM  then open   rangy demos index html  It makes working with caret pos and text selection a breeze

User · Answer

I think you could use the following JavaScript to track the last-focused textbox    lt script gt  var holdFocus   function updateFocus x        holdFocus   x     function appendTextToLastFocus text        holdFocus value    text     lt  script gt    Usage    lt input type  textbox  onfocus  updateFocus this     gt   lt a href     onclick  appendTextToLastFocus  textToAppend      gt    A previous solution  props to gclaghorn  uses textarea and calculates the position of the cursor too  so it may be better for what you want  On the other hand  this one would be more lightweight  if that s what you re looking for

User · Answer

This jQuery plugin gives you a pre-made way of selection caret manipulation

User · Answer

you can only focus required textbox an insert the text there  there is no way to find out where focus is AFAIK  maybe interating over all DOM nodes      check this stackoverflow - it has a solution for you  How do I find out which DOM element has the focus

[javascript] Inserting a text where cursor is using Javascript/jquery

Examples related to javascript

Examples related to jquery