Inserisci il testo in textarea con jQuery


151

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.


1
Se questa è la soluzione, preferirei costruirla in me stessa, comunque. È per un blog personale che sto facendo per un amico, quindi tutto ciò che si adatta a questo.
Oliver Stubley,

quindi vuoi selezionare un testo, e qualunque sia quello selezionato, usa jquery per popolare un'area di testo, in tal caso da dove proviene questo testo, immesso manualmente o da un tag speciale?
TStamper,

TStamper, voglio essere in grado di fare clic su un pulsante e, a seconda di cosa si fa clic, inserire il testo in un'area di testo.
Oliver Stubley,

quindi se fai clic su un pulsante etichettato "grassetto" vuoi grassetto nella textarea?
TStamper,

Testo non in grassetto, ma tag in grassetto (probabilmente personalizzato rispetto a html)
Oliver Stubley,

Risposte:


125

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

controlla la mia risposta per un modo molto più semplice di aggiungere testo
Jason,

8
@ Jason- scusa non è vero, append si aspetta che i dati html inizino con un elemento html es: <p
TStamper,

Che ne dici se il risultato proviene da una pagina PHP e gestito da jQuery? (tra i dati vengono trasmessi utilizzando Json)
Abu Rayane

186

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

3
C'è un finale}) nella risposta, quindi all'inizio ho pensato che la soluzione non funzionasse, ma dopo averlo risolto, funziona benissimo in IE7 e FF3.5. È possibile inserire un pezzo di testo al punto di inserimento per un elemento TEXTAREA. Grazie!
Philippe

1
questo funziona anche in Chrome. grazie per avermi risparmiato un po 'di tempo :) e grazie a @Thinker per il codice originale.
Veli Gebrev,

Sono venuto qui da una ricerca su Google. So che la tua risposta ha un anno, ma grazie mille per questo. Funziona come un incantesimo
Mike Turley,

6
È selpensato per essere globale?
qwertymk,

1
Per chiunque desideri la versione di coffeescript
zachaysan

47

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


Questo evidenziatore inserisce anche il testo?
Oliver Stubley,

2
Ma quella soluzione non funzionerà, quando l'utente sposta il cursore da qualche parte indietro :) Comunque, non importa.
Pensatore

3
usi 'questo' sia come insieme avvolto che come elemento. hmmm .. ho appena provato e non funziona senza modifiche
Scott Evernden

4
Neanche questo codice ha funzionato. Sto usando jQuery. Ho provato sia un'area di testo che un campo di testo. Credo che this.value, ad esempio, dovrebbe essere this.val (), ecc.
Nick,

1
Sì, su IE ha continuato a inserirsi nella parte superiore del DOM e su Fox non ha fatto nulla. Utilizzando l'ultimo JQuery ...
Caveatrob,

19

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.


13

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.


5
@temoto: voto negativo per nomi di variabili non inglesi? È ancora completamente leggibile così com'è. Il pulsante per il voto negativo dovrebbe essere utilizzato se una risposta non è utile, ma non è il caso qui. A proposito, ti costa anche un po 'di reputazione quando voti in ribasso.
Josh M.,

Ci è voluto un po 'per capire il codice spagnolo. e c'è un bug in questo codice. Si stava inserendo sempre verso l'inizio della casella di testo anziché verso la fine. Ad esempio: se il testo è: Gentile utente e facendo clic su di esso veniva inserito prima caro anziché dopo l'utente di testo.
Dev

@JoshM. il fatto è che questo è un duplicato della risposta più vecchia e più completa scritta da Thinker qui ... Ha eliminato alcune delle .focus()invocazioni e degli aggiornamenti alla selectionStarte selectionEnddopo la modifica. Le variabili spagnole potrebbero essere state usate per giustificare un'altra risposta ...
CPHPython,

12

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

10

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

Grazie, ci proverò, sono nuovo su jQuery, quindi non sono a conoscenza di tutte le funzioni facili da usare.
Oliver Stubley,

anche io sono relativamente nuovo. è divertente e semplicissimo una volta capito. Dai
Jason

5
Come notato da Marcus di seguito, append()non funziona sul valore di a textarea. Il append()metodo si rivolge a innerHTML, non al valore dell'area di testo.
Turadg,

6

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


5

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

3

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;

1

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

0

Penso che sarebbe meglio

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

0

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


0

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

0

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


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

-1

L'ho usato e funziona benissimo :)

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

Remi


1
No non lo fa. Se modifichi l'html dell'area di testo, vedi il contenuto lì, ma quando salvi il FORM non funziona, perché il modulo ha bisogno del valore di textarea, non dell'HTML interno.
tothemario,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.