Inserisci il testo in textarea con jQuery

Mi chiedo come posso inserire il testo in un'area di testo usando jquery, facendo clic su un tag di ancoraggio.

Non voglio sostituire il testo già in textarea, voglio aggiungere nuovo testo a textarea.

Da quello che hai nei commenti di Jason prova:

$('a').click(function() //this will apply to all anchor tags
{ 
   $('#area').val('foobar'); //this puts the textarea for the id labeled 'area'
})

Modifica: per aggiungere al testo, guarda in basso

$('a').click(function() //this will apply to all anchor tags
{ 
   $('#area').val($('#area').val()+'foobar'); 
})

Mi piace l'estensione della funzione jQuery. Tuttavia, questo si riferisce all'oggetto jQuery non all'oggetto DOM. Quindi l'ho modificato un po 'per renderlo ancora migliore (può essere aggiornato in più caselle di testo / textareas contemporaneamente).

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

Funziona davvero bene. Puoi inserire in più luoghi contemporaneamente, come:

$('#element1, #element2, #element3, .class-of-elements').insertAtCaret('text');

Uso questa funzione nel mio codice:

$.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>

Non è mio al 100%, l'ho cercato su Google da qualche parte e poi ho messo a punto la mia app.

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

So che questa è una vecchia domanda, ma per le persone che cercano questa soluzione vale la pena notare che non dovresti usare append () per aggiungere contenuto a un'area di testo. il metodo append () si rivolge a innerHTML e non al valore dell'area di testo. Il contenuto può essere visualizzato nell'area di testo ma non verrà aggiunto al valore del modulo dell'elemento.

Come notato sopra usando:

$('#textarea').val($('#textarea').val()+'new content'); 

funzionerà bene.

questo ti permette di "iniettare" un pezzo di testo nella casella di testo, iniettare significa: accoda il testo dove si trova il cursore.

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

E puoi usarlo in questo modo:

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

Divertente e ha più senso quando abbiamo la funzionalità "Inserisci tag nel testo".

funziona in tutti i browser.

Hej questa è una versione modificata che funziona bene in FF @least per me e si inserisce nella posizione del cursore

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

hai provato:

$("#yourAnchor").click(function () {
    $("#yourTextarea").val("your text");
});

non sono sicuro dell'illuminazione automatica, però.

MODIFICA :

Per aggiungere:

$("#yourAnchor").click(function () {
    $("#yourTextarea").append("your text to append");
});

Quello che chiedi dovrebbe essere ragionevolmente semplice in jQuery-

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

Il modo migliore che posso pensare di evidenziare il testo inserito è racchiuderlo in un arco con una classe CSS con l' background-colorimpostazione del colore che preferisci. Nel successivo inserto, è possibile rimuovere la classe da qualsiasi intervallo esistente (o rimuovere gli intervalli).

Tuttavia, sul mercato sono disponibili molti editor WYSIWYG HTML / Rich Text gratuiti, sono sicuro che uno soddisferà le tue esigenze

• TinyMCE - Editor WYSIWYG di JavaScript
• Editor Rich Text - Libreria YUI
• 10 editor Rich Text jQuery e non jQuery JavaScript

Ecco una soluzione rapida che funziona in jQuery 1.9+:

a) Ottieni posizione di inserimento:

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) Aggiungi testo in posizione di inserimento:

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

$('textarea').each(function() {
  var $this = $(this);
  $this.click(function() {
    //get caret position
    var caret = getCaret($this);

    //append some text
    appendAtCaret($this, caret, 'Some text');
  });
});

Funziona bene per 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;

Se desideri aggiungere contenuto all'area di testo senza sostituirli, puoi provare quanto segue

$('textarea').append('Whatever need to be added');

Secondo il tuo scenario sarebbe

$('a').click(function() 
{ 
  $('textarea').append($('#area').val()); 
})

Penso che sarebbe meglio

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

Un'altra soluzione è descritta anche qui nel caso in cui alcuni degli altri script non funzionino nel tuo caso.

Questo è simile alla risposta data da @panchicore con un bug minore corretto.

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

Soluzione semplice potrebbe essere: ( Assunzione : Volete qualunque cosa digiti all'interno del testo per ottenere aggiunto a ciò che è già lì nella textarea )

In onClick caso di tag <a>, scrivere una funzione definita dall'utente, che fa questo:

function textType(){

  var **str1**=$("#textId1").val();

  var **str2**=$("#textId2").val();

  $("#textId1").val(str1+str2);

}

(dove ids, textId1 - per o / p textArea textId2 -per i / p textbox ')

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

L'ho usato e funziona benissimo :)

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

Remi