Masukkan teks ke dalam textarea dengan jQuery

Saya bertanya-tanya bagaimana saya bisa memasukkan teks ke dalam area teks menggunakan jquery, setelah mengklik tag jangkar.

Saya tidak ingin mengganti teks yang sudah ada di textarea, saya ingin menambahkan teks baru ke textarea.

Dari apa yang Anda miliki di komentar Jason, cobalah:

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

Edit- Untuk menambahkan teks lihat di bawah

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

Saya suka ekstensi fungsi jQuery. Namun, ini merujuk ke objek jQuery bukan objek DOM. Jadi saya telah memodifikasinya sedikit untuk membuatnya lebih baik (dapat memperbarui dalam beberapa kotak teks / textareas sekaligus).

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

Ini bekerja dengan sangat baik. Anda dapat menyisipkan ke beberapa tempat sekaligus, seperti:

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

Saya menggunakan fungsi ini dalam kode saya:

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

Itu bukan milikku 100%, aku mencari di suatu tempat lalu mencari aplikasi milikku.

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

Saya tahu ini adalah pertanyaan lama tetapi bagi orang yang mencari solusi ini perlu dicatat bahwa Anda tidak harus menggunakan append () untuk menambahkan konten ke textarea. metode append () menargetkan innerHTML bukan nilai dari textarea. Konten dapat muncul di textarea tetapi tidak akan ditambahkan ke nilai bentuk elemen.

Seperti disebutkan di atas menggunakan:

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

akan bekerja dengan baik.

ini memungkinkan Anda "menyuntikkan" sepotong teks ke kotak teks, menyuntikkan berarti: menambahkan teks di mana kursor berada.

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

Dan Anda dapat menggunakannya seperti ini:

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

Lucu dan memiliki lebih banyak rasa ketika kita memiliki fungsionalitas "Masukkan Tag ke Teks".

berfungsi di semua browser.

Hej ini adalah versi modifikasi yang berfungsi OK di FF @least untuk saya dan sisipkan pada posisi caret

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

sudahkah anda mencoba:

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

tidak yakin tentang autohighlighting.

EDIT :

Untuk menambahkan:

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

Apa yang Anda minta harus cukup mudah di jQuery-

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

Cara terbaik yang dapat saya pikirkan untuk menyoroti teks yang dimasukkan adalah dengan membungkusnya dalam rentang dengan kelas CSS dengan background-colorset ke warna pilihan Anda. Pada sisipan berikutnya, Anda bisa menghapus kelas dari bentang yang ada (atau menghapus bentang).

Namun, Ada banyak editor WYSIWYG HTML / Rich Text gratis yang tersedia di pasaran, saya yakin Anda akan cocok dengan kebutuhan Anda

• TinyMCE - Editor JavaScript WYSIWYG
• Editor Teks Kaya - Perpustakaan YUI
• 10 Editor Teks Kaya JavaScript jQuery dan Non-jQuery

Berikut ini adalah solusi cepat yang berfungsi di jQuery 1.9+:

a) Dapatkan posisi caret:

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) Tambahkan teks pada posisi tanda sisipan:

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

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

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

Ini berfungsi baik untuk saya di 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;

Jika Anda ingin menambahkan konten ke textarea tanpa menggantinya, Anda dapat mencoba di bawah ini

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

Menurut skenario Anda, itu akan terjadi

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

Saya pikir ini akan lebih baik

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

Solusi lain dijelaskan juga di sini jika beberapa skrip lain tidak berfungsi dalam kasus Anda.

Ini mirip dengan jawaban yang diberikan oleh @panchicore dengan bug minor diperbaiki.

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

Solusi sederhana adalah: ( Asumsi : Anda ingin apa pun yang Anda ketik di dalam kotak teks untuk ditambahkan ke apa yang sudah ada di textarea )

Dalam acara onClick dari tag <a>, tulis fungsi yang ditentukan pengguna, yang melakukan ini:

function textType(){

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

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

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

}

(di mana id, textId1 - untuk o / p textArea textId2 -untuk 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) ;
        }
    }
});

Saya menggunakan itu dan itu bekerja dengan baik :)

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

Remi