Insert text into textarea with jQuery

Question

I m wondering how I can insert text into a text area using jquery  upon the click of an anchor tag    I don t want to replace text already in textarea  I want to append new text to textarea

User · Answer

What you ask for should be reasonably straightforward in jQuery-

$(function() {
    $('#myAnchorId').click(function() { 
        var areaValue = $('#area').val();
        $('#area').val(areaValue + 'Whatever you want to enter');
    });
});

The best way that I can think of highlighting inserted text is by wrapping it in a span with a CSS class with background-color set to the color of your choice. On the next insert, you could remove the class from any existing spans (or strip the spans out).

However, There are plenty of free WYSIWYG HTML/Rich Text editors available on the market, I'm sure one will fit your needs

TinyMCE - JavaScript WYSIWYG editor
Rich Text Editor - YUI Library
10 jQuery and Non-jQuery JavaScript Rich Text Editors

User · Answer

fn extend       insertAtCaret  function myValue            var elemSelected   window getSelection            if elemSelected                var startPos   elemSelected getRangeAt 0  startOffset              var endPos   elemSelected getRangeAt 0  endOffset              this val this val   substring 0  startPos  myValue this val   substring endPos this val   length              else               this val this val    myValue

User · Answer

I use this function in my code    x000D   x000D    fn extend   x000D    insertAtCaret  function myValue    x000D      this each function     x000D        if  document selection    x000D          this focus    x000D          var sel   document selection createRange    x000D          sel text   myValue  x000D          this focus    x000D          else if  this selectionStart    this selectionStart     0     x000D          var startPos   this selectionStart  x000D          var endPos   this selectionEnd  x000D          var scrollTop   this scrollTop  x000D          this value   this value substring 0  startPos    x000D            myValue   this value substring endPos this value length   x000D          this focus    x000D          this selectionStart   startPos   myValue length  x000D          this selectionEnd   startPos   myValue length  x000D          this scrollTop   scrollTop  x000D          else   x000D          this value    myValue  x000D          this focus    x000D          x000D          x000D      return this  x000D      x000D      x000D  input width 100px  x000D  label display block margin 10px 0  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt label gt Copy text from   lt input id  in2copy  type  text  value  x  gt  lt  label gt  x000D   lt label gt Insert text in   lt input id  in2ins  type  text  value  1 2 3  autofocus gt  lt  label gt  x000D   lt button onclick      in2ins   insertAtCaret     in2copy   val     gt Insert lt  button gt  x000D   x000D   x000D    It s not 100  mine  I googled it somewhere and then tuned for mine app   Usage      element   insertAtCaret  text

User · Answer

have you tried       yourAnchor   click function              yourTextarea   val  your text          not sure about autohighlighting  though   EDIT   To append        yourAnchor   click function              yourTextarea   append  your text to append

User · Answer

I think this would be better    function         myAnchorId   click function          var areaValue       area   val            area   val areaValue    Whatever you want to enter

User · Answer

Simple solution would be    Assumption  You want whatever you type inside the textbox to get appended to what is already there in the textarea   In the onClick event of the  lt  a   tag write a user-defined function  which does this   function textType       var   str1       textId1   val       var   str2       textId2   val           textId1   val str1 str2         where the ids textId1- for o p textArea textId2-for i p textbox

User · Answer

this one allow you  inject  a piece of text to textbox  inject means  appends the text where cursor is   function inyectarTexto elemento valor    var elemento dom document getElementsByName elemento  0    if document selection     elemento dom focus      sel document selection createRange      sel text valor    return    if elemento dom selectionStart  elemento dom selectionStart   0      var t start elemento dom selectionStart    var t end elemento dom selectionEnd    var val start elemento dom value substring 0 t start     var val end elemento dom value substring t end elemento dom value length     elemento dom value val start valor val end    else    elemento dom value  valor         And you can use it like this    lt a href  javascript void 0    onclick  inyectarTexto  nametField   hello world      gt Say hello world to text lt  a gt    Funny and have more sence when we have  Insert Tag into Text  functionality   works in all browsers

User · Answer

This is similar to the answer given by  panchicore with a minor bug fixed   function insertText element  value        var element dom   document getElementsByName element  0      if  document selection              element dom focus          sel   document selection createRange          sel text   value        return            if  element dom selectionStart    element dom selectionStart     0              var t start   element dom selectionStart       var t end   element dom selectionEnd       var val start   element dom value substring value  t start        var val end   element dom value substring t end  element dom value length        element dom value   val start   value   val end           else            element dom value    value

User · Answer

If you want to append content to the textarea without replacing them  You can try the below     textarea   append  Whatever need to be added      According to your scenario it would be     a   click function            textarea   append     area   val

User · Answer

I like the jQuery function extension  However  the this refers to the jQuery object not the DOM object  So I ve modified it a little to make it even better  can update in multiple textboxes   textareas at once    jQuery fn extend   insertAtCaret  function myValue     return this each function i        if  document selection            For browsers like Internet Explorer       this focus          var sel   document selection createRange          sel text   myValue        this focus              else if  this selectionStart    this selectionStart     0             For browsers like Firefox and Webkit based       var startPos   this selectionStart        var endPos   this selectionEnd        var scrollTop   this scrollTop        this value   this value substring 0  startPos  myValue this value substring endPos this value length         this focus          this selectionStart   startPos   myValue length        this selectionEnd   startPos   myValue length        this scrollTop   scrollTop        else         this value    myValue        this focus                        This works really well  You can insert into multiple places at once  like       element1   element2   element3   class-of-elements   insertAtCaret  text

User · Answer

Hej this is a modified version which works OK in FF  least for me and inserts at the carets position      fn extend     insertAtCaret  function myValue     var obj    if  typeof this 0  name    undefined    obj   this 0     else obj   this     if    browser msie        obj focus        sel   document selection createRange        sel text   myValue      obj focus            else if    browser mozilla      browser webkit        var startPos   obj selectionStart      var endPos   obj selectionEnd      var scrollTop   obj scrollTop      obj value   obj value substring 0  startPos  myValue obj value substring endPos obj value length       obj focus        obj selectionStart   startPos   myValue length      obj selectionEnd   startPos   myValue length      obj scrollTop   scrollTop      else       obj value    myValue      obj focus

User · Answer

Another solution is described also here in case some of the other scripts does not work in your case

User · Answer

It works good for me in Chrome 20 0 11  var startPos   this 0  selectionStart  var endPos   this 0  selectionEnd  var scrollTop   this scrollTop  this 0  value   this 0  value substring 0  startPos    myVal   this 0  value substring endPos  this 0  value length   this focus    this selectionStart   startPos   myVal length  this selectionEnd   startPos   myVal length  this scrollTop   scrollTop

User · Answer

I used that and it work fine         textarea   html  Put here your content      Remi

User · Answer

I know this is an old question but for people searching for this solution it s worth noting that you should not use append   to add content to a textarea  the append   method targets innerHTML not the value of the textarea  The content may appear in the textarea but it will not be added to the element s form value   As noted above using        textarea   val     textarea   val    new content       will work fine

User · Answer

From what you have in Jason s comments try      a   click function     this will apply to all anchor tags           area   val  foobar      this puts the textarea for the id labeled  area       Edit- To append to text look at below     a   click function     this will apply to all anchor tags           area   val     area   val    foobar

User · Answer

Here is a quick solution that works in jQuery 1 9    a  Get caret position   function getCaret el            if  el prop  selectionStart                  return el prop  selectionStart              else if  document selection                el focus                 var r   document selection createRange                if  r    null                    return 0                             var re   el createTextRange                        rc   re duplicate                re moveToBookmark r getBookmark                 rc setEndPoint  EndToStart   re                return rc text length                    return 0           b  Append text at caret position   function appendAtCaret  target  caret   value            var value    target val            if  caret    value length                var startPos    target prop  selectionStart                var scrollTop    target scrollTop               target val value substring 0  caret           value         value substring caret  value length                 target prop  selectionStart   startPos    value length                target prop  selectionEnd   startPos    value length                target scrollTop   scrollTop            else if  caret    0                         target val  value         value             else                target val value          value                      c  Example     textarea   each function       var  this     this      this click function           get caret position     var caret   getCaret  this          append some text     appendAtCaret  this  caret   Some text

[jquery] Insert text into textarea with jQuery

Examples related to jquery

Examples related to formatting

Examples related to textarea