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.

Ucayali

If this is the solution - Would prefer to build it in myself, however. Its for a personal blog I'm doing fora friend, so anything that will fit this. – Ucayali

so you want to select a text, and whichever one selected, use jquery to populate a textarea, if so where is this text coming from, inputted manually or from an special tag? – Thermochemistry

TStamper, I want to be able to click a button, and depending on what is clicked insert text into a textarea. – Ucayali

so if you click on a button labeled "bold" you want bold in the textarea? – Thermochemistry

Not bold text, but bold tags (probably custom as opposed to html) – Ucayali

? Im not understanding, so if you click on a bold button, you would want the bold tag in your textarea?"<b>" – Thermochemistry

Yes, or a variation of that. If you do not understand, don't worry, others are here to help me too. – Ucayali

@Oliver- my reasoning for questioning was to make sure I understand as well as others, nothing to take offense to – Thermochemistry

Sorry, didn't mean to come over as aggresive, your input is helpful anyhow. – Ucayali

Answer 1

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'); 
})

Thermochemistry

check my answer for a much easier way to append text – Capitate

@Jason- sorry not true , append expects html data starting with a html element ex: <p – Thermochemistry

How about if the result is coming from a PHP page and handled by jQuery? (in between data is transmitted using Json) – Implausibility

Answer 2

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');

Kowalczyk

There is a trailing }) in the anwer so at first I tought that solution wasn't working, but after fixing it, it works great in IE7 and FF3.5. You can insert a piece of text at caret for a TEXTAREA element. Thank you! – Srinagar

this also works in Chrome. thanks for saving me some time :) and thank you to @Thinker for the original code. – Wotton

Came here from a google search.. .I know your answer is a year old, but thanks so much for this. Works like a charm – Kreitman

Is sel meant to be global? – Selma

Perfect, this works. I would have submitted my own version of the code modification from @Thinker, when I stumbled into this. Same concept: The 'this' of jQuery is a jQuery object. The intended 'this' of the DOM code is a DOM element. The 'each' did the trick. – Psychosis

This seems to just always post my text at the end of the selection. Its probably because selectionStart is never written before this method is called. – Blotchy

For anyone that wants the coffeescript version: gist.github.com/zachaysan/7100458 – Wear

This won't trigger onchange or oninput events, which it should here. Try add $(this).trigger("input"); – Hypnotize

@ArdeeAram a little editing of Thinker's answer was enough to make it working, avoiding this duplicate. Aniebiet reputation at the moment consists solely of the upvotes in this answer... – Short

Answer 3

I use this function in my code:

$.fn.extend({
  insertAtCaret: function(myValue) {
    this.each(function() {
      if (document.selection) {
        this.focus();
        var sel = document.selection.createRange();
        sel.text = myValue;
        this.focus();
      } else if (this.selectionStart || this.selectionStart == '0') {
        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();
      }
    });
    return this;
  }
});

input{width:100px}
label{display:block;margin:10px 0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Copy text from: <input id="in2copy" type="text" value="x"></label>
<label>Insert text in: <input id="in2ins" type="text" value="1,2,3" autofocus></label>
<button onclick="$('#in2ins').insertAtCaret($('#in2copy').val())">Insert</button>

It's not 100% mine, I googled it somewhere and then tuned for mine app.

Usage: $('#element').insertAtCaret('text');

Mccluskey

Does this highlight inserted text also? – Ucayali

But that solution won't work, when user move his cursor somewhere back :) Anyway, nevermind. – Mccluskey

you use 'this' as both a wrapped set and an element. hmmm .. just tried and it doesn't work w/o edits – Weathered

hi, I tried this code and it simply doesn't work ... @Scott: how did you get tinker with this to get it working? Thanks :) – Bellyful

I couldn't get this code to work either. I'm using jQuery. I tried both a textarea and a text field. I believe this.value for instance should be this.val(), etc.. – Bunco

Yeah on IE it kept inserting at the top of the DOM and on Fox it did nothing. Using latest JQuery... – Marcellusmarcelo

Hello, tried this, and doesn't work at all. Using Google Chrome. – Psychosis

@Nick there was a .each loop missing, I edited the answer to contain a running snippet that accesses the jQuery elements properly. – Short

Answer 4

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.

Hypolimnion

Answer 5

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:

<a href="javascript:void(0);" onclick="inyectarTexto('nametField','hello world');" >Say hello world to text</a>

Funny and have more sence when we have "Insert Tag into Text" functionality.

works in all browsers.

Smashup

@temoto: Down-vote for non-english variable names? It's still completely readable as-is. The down-vote button is supposed to be used if an answer is not helpful which isn't the case here. BTW it also costs you a few reputation when you down-vote. – Sidelong

Took a while to understand spanish code. and there is a bug in this code. It was inserting always towards the start of the text box rather than towards the end. For ex: If the text is: Dear user and onclicking it was inserting before dear rather than after the text user. – Ninny

@JoshM. the thing is, this is a duplicate of the older and more complete answer written by Thinker in here... He took out some of the .focus() invocations and the updates to the selectionStart and selectionEnd after the modification. Spanish variables may have been used to justify another answer... – Short

Answer 6

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();
   }
 }
})

Klausenburg

Answer 7

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");
});

Capitate

Thanks, i'll give it a go, I am new to jQuery so am not aware of all of the easy to use functions. – Ucayali

i'm relatively new too. it's fun and super easy once you get the hang of it. Check this out for more reference: docs.jquery.com/Main_Page – Capitate

As noted by Marcus below, append() doesn't work on the value of a textarea. The append() method targets the innerHTML, not the value of the textarea. – Ard

Answer 8

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

Penniepenniless

Answer 9

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');
  });
});

Sluggish

Answer 10

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;

Hoitytoity

Answer 11

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()); 
})

Ottillia

Answer 12

I think this would be better

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

Scheelite

Answer 13

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

Kantian

Answer 14

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 < 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')

Mecklenburg

Answer 15

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;
   }
}

Ninny

Answer 16

$.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) ;
        }
    }
});

Cohbert

Answer 17

I used that and it work fine :)

$("#textarea").html("Put here your content");

Remi

Enrobe

No it doesn't. If you change the html of the textarea, you see the content there, but when you save the FORM it doesn't work, because the form needs the textarea value, not the inner HTML. – Lifer