it-swarm.com.de

Fügen Sie mit jQuery Text in den Textbereich ein

Ich frage mich, wie ich mit Jquery auf einen Ankertag einen Text in einen Textbereich einfügen kann. 

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

145
Oliver Stubley

Versuchen Sie Folgendes aus den Kommentaren von Jason:

$('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 einen Text siehe unten

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

Ich mag die jQuery-Funktionserweiterung. Das this bezieht sich jedoch auf das jQuery-Objekt und nicht auf das DOM-Objekt. Also habe ich es ein wenig geändert, um es noch besser zu machen (kann in mehreren Textboxen/Textareas 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:

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

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% meiner, ich habe es irgendwo gegoogelt und dann für meine App eingestellt.

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

44
Thinker

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

Wie oben erwähnt mit: 

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

wird gut funktionieren.

19
Marcus

mit diesem können Sie ein Textstück in das Textfeld "injizieren". Das bedeutet, dass der Text an der Position des Cursors angehängt wird.

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 du kannst es so benutzen:

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

Witzig und haben mehr Sinn, wenn wir über die Funktion "Tag in Text einfügen" verfügen.

funktioniert in allen Browsern.

13
panchicore

Hej Dies ist eine modifizierte Version, die OK in FF @Least für mich funktioniert und an der Position des Carets 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();
   }
 }
})
12
Babak Bandpay

hast du es versucht:

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

ich bin mir allerdings nicht sicher, ob es automatisch leuchtet.

EDIT:

Anhängen: 

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

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

a) Caret-Position erhalten:

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) Text an Caret-Position anfügen:

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

Das, wonach Sie fragen, sollte in jQuery-

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

Die beste Möglichkeit, den eingefügten Text hervorzuheben, besteht darin, ihn in einen Bereich mit einer CSS-Klasse zu umschließen, wobei background-color auf die Farbe Ihrer Wahl gesetzt ist. Bei der nächsten Einfügung können Sie die Klasse aus allen vorhandenen Bereichen entfernen (oder die Bereiche entfernen).

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

5
Russ Cam

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;
3
Long

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

Je nach Szenario wäre es so

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

Dies ist der Antwort von @panchicore ähnlich, bei der ein kleinerer 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;
   }
}
0
Dev
$.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) ;
        }
    }
});
0
George SEDRA

Ich denke das wäre besser

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

Ich habe das benutzt und es funktioniert gut :)

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

Remi

0
Remi

Eine einfache Lösung wäre: (Assumption: Sie möchten, was Sie in der Textbox eingeben, wird an das angehängt, was bereits in der Textarea vorhanden ist.)

Schreiben Sie im onClick -Ereignis des <a> -Tags eine benutzerdefinierte Funktion, die Folgendes ausführt:

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

0
SidTechs1

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

0
d.popov