Masukkan teks ke dalam textarea dengan jQuery


151

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.


1
Jika ini solusinya - Akan lebih suka membangunnya di dalam diri saya. Ini untuk blog pribadi yang saya lakukan untuk teman, jadi apa pun yang cocok untuk ini.
Oliver Stubley

jadi Anda ingin memilih teks, dan mana yang dipilih, gunakan jquery untuk mengisi teks, jika demikian dari mana teks ini berasal, dimasukkan secara manual atau dari tag khusus?
TStamper

TStamper, saya ingin dapat mengklik tombol, dan tergantung pada apa yang diklik, masukkan teks ke dalam textarea.
Oliver Stubley

jadi jika Anda mengklik tombol berlabel "tebal" Anda ingin cetak tebal di textarea?
TStamper

Tidak berani teks, tetapi tag tebal (mungkin kustom sebagai lawan html)
Oliver Stubley

Jawaban:


125

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

periksa jawaban saya untuk cara yang jauh lebih mudah untuk menambahkan teks
Jason

8
@ Jason- maaf tidak benar, tambahkan mengharapkan data html dimulai dengan elemen html ex: <p
TStamper

Bagaimana jika hasilnya berasal dari halaman PHP dan ditangani oleh jQuery? (di antara data ditransmisikan menggunakan Json)
Abu Rayane

186

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

3
Ada trailing}) di anwer jadi pada awalnya saya pikir solusi itu tidak berfungsi, tetapi setelah memperbaikinya, ia berfungsi dengan baik di IE7 dan FF3.5. Anda dapat menyisipkan selembar teks di caret untuk elemen TEXTAREA. Terima kasih!
Philippe

1
ini juga berfungsi di Chrome. terima kasih telah menghemat waktu saya :) dan terima kasih kepada @Thinker untuk kode aslinya.
Veli Gebrev

Datang ke sini dari pencarian google ... Saya tahu jawaban Anda berumur setahun, tapi terima kasih banyak untuk ini. Bekerja seperti pesona
Mike Turley

6
Apakah seldimaksudkan untuk menjadi global?
qwertymk

1
Bagi siapa pun yang menginginkan versi coffeescript
zachaysan

47

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


Apakah highlight ini juga memasukkan teks?
Oliver Stubley

2
Tapi solusi itu tidak akan berfungsi, ketika pengguna memindahkan kursornya ke suatu tempat :) Pokoknya, tidak pernah.
Thinker

3
Anda menggunakan 'ini' sebagai set terbungkus dan elemen. hmmm .. baru saja mencoba dan tidak berhasil tanpa diedit
Scott Evernden

4
Saya juga tidak bisa membuat kode ini berfungsi. Saya menggunakan jQuery. Saya mencoba bidang teks dan bidang teks. Saya percaya this.value misalnya harus this.val (), dll.
Nick

1
Ya pada IE itu terus memasukkan di bagian atas DOM dan pada Fox tidak melakukan apa-apa. Menggunakan JQuery terbaru ...
Caveatrob

19

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.


13

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.


5
@temoto: Turunkan suara untuk nama variabel non-Inggris? Ini masih sepenuhnya dapat dibaca apa adanya. Tombol down-vote seharusnya digunakan jika jawaban tidak membantu yang tidak terjadi di sini. BTW itu juga membuat Anda kehilangan beberapa reputasi saat memilih-turun.
Josh M.

Butuh waktu beberapa saat untuk memahami kode bahasa Spanyol. dan ada bug dalam kode ini. Itu menyisipkan selalu menjelang awal kotak teks daripada menjelang akhir. Sebagai contoh: Jika teksnya adalah: Pengguna yang terhormat dan onclicking, teks itu disisipkan di hadapan pengguna daripada pengguna teks.
Dev

@ Josh. masalahnya, ini adalah duplikat dari jawaban yang lebih tua dan lebih lengkap yang ditulis oleh Thinker di sini ... Dia mengeluarkan beberapa .focus()doa dan pembaruan untuk selectionStartdan selectionEndsetelah modifikasi. Variabel Spanyol mungkin telah digunakan untuk membenarkan jawaban lain ...
CPHPython

12

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

10

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

Terima kasih, saya akan mencobanya, saya baru mengenal jQuery jadi saya tidak mengetahui semua fungsi yang mudah digunakan.
Oliver Stubley

saya juga relatif baru. itu menyenangkan dan sangat mudah setelah Anda terbiasa. Lihat ini untuk referensi lebih lanjut: docs.jquery.com/Main_Page
Jason

5
Seperti dicatat oleh Marcus di bawah ini, append()tidak bekerja pada nilai a textarea. The append()Metode menargetkan innerHTML, bukan nilai textarea.
Turadg

6

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


5

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

3

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;

1

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

0

Saya pikir ini akan lebih baik

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

0

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


0

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

0

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


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

-1

Saya menggunakan itu dan itu bekerja dengan baik :)

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

Remi


1
Tidak, tidak. Jika Anda mengubah html dari textarea, Anda melihat konten di sana, tetapi ketika Anda menyimpan FORMULIR itu tidak berfungsi, karena formulir membutuhkan nilai textarea, bukan HTML bagian dalam.
tothemario
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.