Fügen Sie mit jQuery Text in den Textbereich ein

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.

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

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

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

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.

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.

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

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

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

• TinyMCE - JavaScript WYSIWYG-Editor
• Rich Text Editor - YUI-Bibliothek
• 10 JavaScript-Rich-Text-Editoren für jQuery und Nicht-jQuery

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

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;

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

Ich denke das wäre besser

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

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

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

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

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

Ich habe das benutzt und es funktioniert gut :)

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

Remi