JQuery ile metin alanına metin ekleme

Bir çapa etiketi tıklandığında jquery kullanarak bir metin alanına nasıl metin ekleyebilirim merak ediyorum.

Zaten textarea'da olan metni değiştirmek istemiyorum, textarea'ya yeni metin eklemek istiyorum.

Jason'ın yorumlarında ne yazdığınızı deneyin:

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

Düzenle- Metne eklemek için aşağıya bakın

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

JQuery işlev uzantısını seviyorum. Ancak bu DOM nesnesine değil, jQuery nesnesine karşılık gelir. Bu yüzden daha da iyi hale getirmek için biraz değiştirdim (aynı anda birden fazla metin kutusunda / textareas'ta güncelleyebilir).

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

Bu gerçekten iyi çalışıyor. Aynı anda birden çok yere ekleyebilirsiniz:

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

Kodumda bu işlevi kullanın:

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

% 100 benim değil, bir yere googled ve sonra benim app için ayarlanmış.

Kullanımı: $('#element').insertAtCaret('text');

Bu eski bir soru olduğunu biliyorum ama bu çözümü arayan insanlar için bir textarea içerik eklemek için append () kullanmamalısınız. append () yöntemi, textarea değerini değil innerHTML öğesini hedefler. İçerik metin alanında görünebilir, ancak öğenin form değerine eklenmez.

Yukarıda belirtildiği gibi:

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

iyi çalışır.

bu metin kutusuna bir metin parçası "enjekte" sağlar, enjekte anlamına gelir: imlecin olduğu yere metin ekler.

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

Ve bunu şöyle kullanabilirsiniz:

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

Komik ve "Metne Etiket Ekle" işlevine sahip olduğumuzda daha fazla sence var.

tüm tarayıcılarda çalışır.

Hej bu benim için FF @ en azından Tamam çalışır ve carets pozisyonda ekler değiştirilmiş bir versiyonu

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

denedin mi:

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

otomatik ışıklandırma konusunda emin değilim.

DÜZENLE :

Eklemek:

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

Ne istiyorsun jQuery- makul olmalıdır

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

Eklenen metni vurgulamanın en iyi yolu background-color, seçtiğiniz renge ayarlanmış bir CSS sınıfıyla bir açıklığa sarmaktır. Bir sonraki ekte, sınıfı mevcut açıklıklardan kaldırabilir (veya açıklıkları çıkarabilirsiniz).

Ancak, piyasada mevcut ücretsiz WYSIWYG HTML / Zengin Metin editörleri var, eminim ihtiyaçlarınızı karşılayacak

• TinyMCE - JavaScript WYSIWYG editörü
• Zengin Metin Düzenleyici - YUI Kütüphanesi
• 10 jQuery ve jQuery Olmayan JavaScript Zengin Metin Düzenleyicileri

İşte jQuery 1.9+ ile çalışan hızlı bir çözüm:

a) Caret pozisyonunu alın:

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) Metni düzeltme işareti konumuna ekleyin:

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) Örnek

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

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

Chrome 20.0.11'de benim için iyi çalışıyor

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;

İçeriği textarea'ya değiştirmeden eklemek istiyorsanız, aşağıdakileri deneyebilirsiniz

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

Senaryonuza göre,

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

Bence bu daha iyi olur

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

Başka bir çözüm de tarif edilir burada sizin durumda çalışmıyor durumunda diğer komut bazılarıdır.

Bu, @panchicore tarafından verilen küçük bir hata düzeltildi.

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

Basit bir çözüm olacaktır: ( Varsayım : Eğer içeride yazın ne olursa olsun istediğiniz metin içinde zaten orada ne eklenen almak için textarea )

In onClick <a> etiketinin durumunda, bunu yapan bir kullanıcı tanımlı fonksiyon, yazın:

function textType(){

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

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

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

}

(burada ids, textId1 - o / p text içinArea textId2- i / p metin kutusu için ')

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

Bunu kullandım ve iyi çalışıyor :)

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

Remi