Fügen Sie mit jQuery Text in den Textbereich ein

151

Ich frage mich, wie ich mit jquery Text in einen Textbereich einfügen kann, wenn ich auf ein Ankertag klicke.

Ich möchte keinen Text ersetzen, der bereits im Textbereich vorhanden ist. Ich möchte neuen Text an den Textbereich anhängen.

Oliver Stubley
quelle
1
Wenn dies die Lösung ist - würde es jedoch vorziehen, sie in mich selbst zu bauen. Es ist für einen persönlichen Blog, den ich für einen Freund mache, also alles, was dazu passt.
Oliver Stubley
Wenn Sie also einen Text auswählen möchten, und je nachdem, welchen Sie ausgewählt haben, verwenden Sie jquery, um einen Textbereich zu füllen. Wenn ja, woher kommt dieser Text, der manuell eingegeben oder von einem speziellen Tag stammt?
TStamper
TStamper, ich möchte in der Lage sein, auf eine Schaltfläche zu klicken und je nachdem, auf was geklickt wird, Text in einen Textbereich einzufügen.
Oliver Stubley
Wenn Sie also auf eine Schaltfläche mit der Bezeichnung "Fett" klicken, möchten Sie im Textbereich Fettdruck?
TStamper
Kein fetter Text, aber fette Tags (wahrscheinlich benutzerdefiniert im Gegensatz zu HTML)
Oliver Stubley

Antworten:

125

Nach dem, was Sie in Jasons Kommentaren haben, versuchen Sie:

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

Bearbeiten - Zum Anhängen an Text siehe unten

$('a').click(function() //this will apply to all anchor tags
{ 
   $('#area').val($('#area').val()+'foobar'); 
})
TStamper
quelle
Überprüfen Sie meine Antwort für eine viel einfachere Möglichkeit, Text anzuhängen
Jason
8
@ Jason- sorry nicht wahr, anhängen erwartet HTML-Daten beginnend mit einem HTML-Element ex: <p
TStamper
Wie wäre es, wenn das Ergebnis von einer PHP-Seite stammt und von jQuery verarbeitet wird? (Zwischendurch werden Daten mit Json übertragen)
Abu Rayane
186

Ich mag die jQuery-Funktionserweiterung. Die jedoch dies bezieht sich auf das jQuery - Objekt nicht das DOM - Objekt. Deshalb habe ich es ein wenig modifiziert, um es noch besser zu machen (kann in mehreren Textfeldern / Textbereichen gleichzeitig aktualisiert werden).

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

Das funktioniert wirklich gut. Sie können an mehreren Stellen gleichzeitig einfügen, z.

$('#element1, #element2, #element3, .class-of-elements').insertAtCaret('text');
Aniebiet Udoh
quelle
3
Es gibt ein nachfolgendes}) in der Antwort, also habe ich zuerst festgestellt, dass die Lösung nicht funktioniert, aber nachdem ich sie behoben habe, funktioniert sie in IE7 und FF3.5 hervorragend. Sie können bei caret einen Text für ein TEXTAREA-Element einfügen. Danke dir!
Philippe
1
Dies funktioniert auch in Chrome. Danke, dass du mir etwas Zeit gespart hast :) und danke an @Thinker für den Originalcode.
Veli Gebrev
Kam von einer Google-Suche hierher. Ich weiß, dass Ihre Antwort ein Jahr alt ist, aber vielen Dank dafür. Funktioniert wie ein Zauber
Mike Turley
6
Soll selglobal sein?
qwertymk
1
Für alle, die die Coffeescript-Version wollen: gist.github.com/zachaysan/7100458
zachaysan
47

Ich benutze diese Funktion in meinem 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>

Es ist nicht 100% meins, ich habe es irgendwo gegoogelt und dann auf meine App abgestimmt.

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

Denker
quelle
Markiert dies auch eingefügten Text?
Oliver Stubley
2
Aber diese Lösung wird nicht funktionieren, wenn der Benutzer seinen Cursor irgendwo zurück bewegt :) Wie auch immer, egal.
Denker
3
Sie verwenden 'this' sowohl als umschlossene Menge als auch als Element. hmmm .. gerade versucht und es funktioniert nicht ohne Änderungen
Scott Evernden
4
Ich konnte diesen Code auch nicht zum Laufen bringen. Ich benutze jQuery. Ich habe sowohl ein Textfeld als auch ein Textfeld ausprobiert. Ich glaube, dieser Wert sollte zum Beispiel dieser Wert () usw. sein.
Nick
1
Ja, im IE wurde es oben im DOM eingefügt, und im Fox hat es nichts getan. Verwenden der neuesten JQuery ...
Caveatrob
19

Ich weiß, dass dies eine alte Frage ist, aber für Leute, die nach dieser Lösung suchen, ist es erwähnenswert, dass Sie append () nicht verwenden sollten, um einem Textbereich Inhalte hinzuzufügen. Die Methode append () zielt auf innerHTML ab, nicht auf den Wert des Textbereichs. Der Inhalt wird möglicherweise im Textbereich angezeigt, jedoch nicht zum Formularwert des Elements hinzugefügt.

Wie oben erwähnt mit:

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

wird gut funktionieren.

Marcus
quelle
13

Mit dieser Option können Sie einen Text in das Textfeld "einfügen". Einfügen bedeutet: Hängt den Text an die Stelle an, an der sich der Cursor befindet.

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

Und Sie können es so verwenden:

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

Witzig und sinnvoller, wenn wir die Funktion "Tag in Text einfügen" haben.

funktioniert in allen Browsern.

Panchicore
quelle
5
@temoto: Down-Voting für nicht englische Variablennamen? Es ist immer noch vollständig lesbar. Der Down-Vote-Button soll verwendet werden, wenn eine Antwort nicht hilfreich ist, was hier nicht der Fall ist. Übrigens kostet es Sie auch ein paar Ruf, wenn Sie abstimmen.
Josh M.
Es hat eine Weile gedauert, um den spanischen Code zu verstehen. und es gibt einen Fehler in diesem Code. Es wurde immer am Anfang des Textfelds und nicht am Ende eingefügt. Zum Beispiel: Wenn der Text lautet: Lieber Benutzer, und wenn Sie darauf klicken, wurde er vor dem lieben Benutzer und nicht nach dem Textbenutzer eingefügt.
Dev
@ JoshM. Die Sache ist, dies ist ein Duplikat der älteren und vollständigeren Antwort, die Thinker hier geschrieben hat ... Er hat einige der .focus()Aufrufe und Aktualisierungen der selectionStartund selectionEndnach der Änderung herausgenommen. Spanische Variablen wurden möglicherweise verwendet, um eine andere Antwort zu rechtfertigen ...
CPHPython
12

Hej das ist eine modifizierte Version, die in FF @least für mich OK funktioniert und an der Carets Position einfügt

  $.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();
   }
 }
})
Babak Bandpay
quelle
10

Hast du es versucht:

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

Ich bin mir jedoch nicht sicher, ob es sich um eine automatische Beleuchtung handelt.

EDIT :

Anhängen:

$("#yourAnchor").click(function () {
    $("#yourTextarea").append("your text to append");
});
Jason
quelle
Vielen Dank, ich werde es versuchen. Ich bin neu in jQuery und daher nicht über alle benutzerfreundlichen Funktionen informiert.
Oliver Stubley
Ich bin auch relativ neu. Es macht Spaß und ist super einfach, sobald Sie den Dreh raus haben. Weitere Informationen finden Sie hier
Jason
5
Wie von Marcus unten erwähnt, append()funktioniert der Wert von a nicht textarea. Die append()Methode zielt auf das innerHTML ab, nicht auf den Wert des Textbereichs.
Turadg
6

Was Sie verlangen, sollte in jQuery- ziemlich einfach sein.

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

Ich kann mir vorstellen, eingefügten Text am besten hervorzuheben, indem ich ihn in eine Spanne mit einer CSS-Klasse background-coloreinbinde, die auf die Farbe Ihrer Wahl eingestellt ist. Beim nächsten Einfügen können Sie die Klasse aus vorhandenen Bereichen entfernen (oder die Bereiche entfernen).

Es gibt jedoch viele kostenlose WYSIWYG HTML / Rich Text-Editoren auf dem Markt. Ich bin sicher, einer wird Ihren Anforderungen entsprechen

Russ Cam
quelle
5

Hier ist eine schnelle Lösung, die in jQuery 1.9+ funktioniert:

a) Holen Sie sich die 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) Fügen Sie den Text an der Caret-Position hinzu:

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

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

    //append some text
    appendAtCaret($this, caret, 'Some text');
  });
});
Avram Cosmin
quelle
3

Es funktioniert gut für mich 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;
Lange
quelle
1

Wenn Sie Inhalte an den Textbereich anhängen möchten, ohne sie zu ersetzen, können Sie Folgendes versuchen

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

Nach Ihrem Szenario wäre es

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

Ich denke das wäre besser

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

quelle
0

Eine andere Lösung wird auch hier beschrieben , falls einige der anderen Skripte in Ihrem Fall nicht funktionieren.

d.popov
quelle
0

Dies ähnelt der Antwort von @panchicore, bei der ein kleiner Fehler behoben wurde.

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;
   }
}
Dev
quelle
0

Eine einfache Lösung wäre: ( Annahme : Sie möchten, dass alles, was Sie in das Textfeld eingeben, an das angehängt wird, was bereits im Textbereich vorhanden ist. )

Im onClick - Ereignisse der <a> -Tag, schreiben Sie eine benutzerdefinierte Funktion, die dies tut:

function textType(){

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

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

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

}

(wobei die IDs textId1 - für o / p textArea textId2 - für i / p textbox ')

SidTechs1
quelle
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) ;
        }
    }
});
George SEDRA
quelle
-1

Ich habe das benutzt und es funktioniert gut :)

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

Remi

Remi
quelle
1
Nein, tut es nicht. Wenn Sie das HTML des Textbereichs ändern, wird der Inhalt dort angezeigt. Wenn Sie jedoch das FORMULAR speichern, funktioniert dies nicht, da das Formular den Textbereichswert und nicht den inneren HTML-Code benötigt.
tothemario