Tetapkan nilai textarea di jQuery


525

Saya mencoba untuk menetapkan nilai dalam bidang textarea menggunakan jquery dengan kode berikut:

$("textarea#ExampleMessage").attr("value", result.exampleMessage);

Masalahnya adalah, begitu kode ini dieksekusi, itu tidak mengubah teks dalam textarea?

Namun ketika melakukan alert($("textarea#ExampleMessage").attr("value"))nilai yang baru ditetapkan dikembalikan?


3
Jika sihir jQuery tidak berfungsi untuk menetapkan val () pada <textarea>, dan Anda menargetkan berdasarkan ID, kemungkinan ada beberapa elemen dengan ID yang sama.
billrichards

Jawaban:


877

Sudahkah Anda mencoba val?

$("textarea#ExampleMessage").val(result.exampleMessage);

5
sebagian besar benar, meskipun val tidak meluangkan waktu untuk memastikan nilai yang Anda atur adalah string, dan attr tampaknya melakukan sedikit lebih banyak sihir secara keseluruhan.
enobrev

62
Ya. Textarea tidak memiliki atribut nilai, sedangkan input tidak.
MDCore

14
Setuju, tetapi val () mengaturnya dalam hal ini. Mereka [jquery] harus menentukan jenis teksnya dan mengatur teksnya.
GONeale

17
textarea memiliki properti nilai (JavaScript) seperti input teks. Itu tidak memiliki valueatribut HTML , tetapi itu tidak masalah, karena keduanya val()dan attr('value')menulis ke properti nilai JavaScript. Catatan, attr()tidak tidak mengatur atribut HTML! Ini hanya mengatur properti JavaScript, sementara mencoba menyembunyikan perbedaan untuk kasus-kasus seperti class / className di mana namanya berbeda. Tetapi Anda masih akan melihat perbedaan untuk tempat-tempat di mana atribut dan properti melakukan hal yang berbeda, seperti dalam elemen formulir.
bobince

2
val(foo)bekerja untuk saya (jQuery 1.9.1). Menggunakan text(foo)loses untuk memperbarui textarea konten kehilangan linebreak pada IE, menggunakan val(foo)mempertahankannya.
Tim

77

Textarea tidak memiliki atribut nilai, nilainya berasal di antara tag, yaitu:, <textarea>my text</textarea>tidak seperti bidang input ( <input value="my text" />). Itu sebabnya attr tidak bekerja :)


50

$("textarea#ExampleMessage").val() di jquery hanya sihir.

Anda harus memperhatikan bahwa tag textarea menggunakan html dalam untuk menampilkan dan tidak dalam atribut nilai seperti halnya tag input.

<textarea>blah blah</textarea>
<input type="text" value="blah blah"/>

Kamu harus menggunakan

$("textarea#ExampleMessage").html(result.exampleMessage)

atau

$("textarea#ExampleMessage").text(result.exampleMessage)

tergantung pada apakah Anda ingin menampilkannya sebagai tag html atau teks biasa.


1
Anda benar, textarea tidak memiliki nilai atau nilai, dan jquery hanya melakukan beberapa sihir untuk membuat hidup lebih mudah bagi pengembang.
Scott Kirkwood

16
Itu tidak disebut sihir, itu disebut abstraksi. textarea hanya 1 dan 0, tetapi semua lapisan abstraksi di komputer Anda menyembunyikannya untuk Anda. Tidak apa-apa untuk menunjukkannya, tapi tolong jangan meminta orang untuk menurunkan suara jawaban lain untuk alasan seperti itu ... :)
Espen Herseth Halvorsen

8
awas - html () mengeksekusi tag skrip.
Lincoln B

3
Dari jQuery API "Metode .text () tidak dapat digunakan pada input formulir atau skrip. Untuk mengatur atau mendapatkan nilai teks dari input atau elemen textarea, gunakan metode .val (). Untuk mendapatkan nilai elemen skrip, gunakan metode .html (). "
pilot

20

Oohh, ayolah anak laki-laki! hanya bekerja dengan

$('#your_textarea_id').val('some_value');

Hanya jika Anda menggunakan pemilih ID. Saya tidak bisa karena saya adalah kode yang dibuat oleh pihak ketiga
Jack

16

Saya pikir ini harus berhasil:

$("textarea#ExampleMessage").val(result.exampleMessage);

10

saya punya pertanyaan yang sama jadi saya memutuskan untuk mencobanya di browser saat ini (kami satu setengah tahun kemudian setelah pertanyaan ini), dan ini ( .val) berfungsi

$("textarea#ExampleMessage").val(result.exampleMessage); 

untuk

  • IE8
  • FF 3.6
  • FF4
  • Opera 11
  • Chrome 10

1
Sebagai catatan, salah satu fungsi jQuery yang luar biasa adalah yang menyediakan kompatibilitas browser, jadi ya, sangat mungkin bahwa .val()akan melakukan keajaiban di beberapa browser;)
diosney

9

Di android .valdan .htmltidak bekerja.

$('#id').text("some value")

melakukan pekerjaan.


1
Dari jQuery API "Metode .text () tidak dapat digunakan pada input formulir atau skrip. Untuk mengatur atau mendapatkan nilai teks dari elemen input atau textarea, gunakan metode .val (). Untuk mendapatkan nilai elemen skrip, gunakan metode .html (). "
pilot

8

Saya memiliki masalah yang sama dan solusi ini tidak berhasil tetapi yang berhasil adalah menggunakan html

$('#your_textarea_id').html('some_value');

3
tidak, html()hanya berfungsi sekali per textarea, lain kali, Anda ingin mengubah konten secara dinamis textarea, html()tidak akan berfungsi ...
Legionar

@ Legionar lalu bagaimana menangani kasus ini?
Jawand Singh

baik, yang satu ini membantu saya stackoverflow.com/questions/1219860/... menggunakan fungsi-fungsi ini saya hanya mengatur nilai yang dikodekan dalam textarea menggunakan$('#textarea').val(encodedtext);
Jawand Singh

5

Di sana masalahnya: Saya perlu membuat kode html dari isi div yang diberikan. Lalu, saya harus memasukkan kode html mentah ini ke dalam textarea. Ketika saya menggunakan fungsi $ (textarea) .val () seperti ini:

$ (textarea) .val ("beberapa html seperti <input type = 'text' value = '' style =" background: url ('http://www.w.com/bg.gif') repeat-x center; "/> bla bla");

atau

$ ('# idTxtArGenHtml'). val ($ ('idDivMain'). html ());

Saya punya masalah dengan beberapa karakter khusus (& '") ketika mereka berada di antara tanda kutip. Tetapi ketika saya menggunakan fungsi: $ (textarea) .html () teksnya ok.

Ada contoh formulir:

<FORM id="idFormContact" name="nFormContact" action="send.php" method="post"  >
    <FIELDSET id="idFieldContact" class="CMainFieldset">
        <LEGEND>Test your newsletter&raquo; </LEGEND> 
        <p>Send to &agrave; : <input id='idInpMailList' type='text' value='youremail@gmail.com' /></p>
        <FIELDSET  class="CChildFieldset">
            <LEGEND>Subject</LEGEND>
            <LABEL for="idNomClient" class="CInfoLabel">Enter the subject: *&nbsp</LABEL><BR/>
          <INPUT value="" name="nSubject" type="text" id="idSubject" class="CFormInput" alt="Enter the Subject" ><BR/>
    </FIELDSET>
    <FIELDSET  class="CChildFieldset">
        <INPUT id="idBtnGen" type="button" value="Generate" onclick="onGenHtml();"/>&nbsp;&nbsp;
          <INPUT id="idBtnSend" type="button" value="Send" onclick="onSend();"/><BR/><BR/>
            <LEGEND>Message</LEGEND>
                <LABEL for="idTxtArGenHtml" class="CInfoLabel">Html code : *&nbsp</LABEL><BR/>
                <span><TEXTAREA  name="nTxtArGenHtml" id="idTxtArGenHtml" width='100%' cols="69" rows="300" alt="enter your message" ></TEXTAREA></span>
        </FIELDSET>
    </FIELDSET>
</FORM>

Dan kode javascript / jquery yang tidak berfungsi untuk mengisi textarea adalah:

function onGenHtml(){
  $('#idTxtArGenHtml').html( $("#idDivMain").html()  );
}

Akhirnya solusinya:

function onGenHtml(){
  $('#idTxtArGenHtml').html( $("#idDivMain").html() );
  $('#idTxtArGenHtml').parent().replaceWith( '<span>'+$('#idTxtArGenHtml').parent().html()+'</span>');
}

Caranya adalah membungkus teks Anda dengan tag rentang untuk membantu dengan fungsi replaceWith. Saya tidak yakin apakah itu sangat bersih, tetapi berfungsi dengan baik juga menambahkan kode html mentah dalam textarea.


5

textarea tidak menyimpan nilai sebagai

<textarea value="someString">

alih-alih, ia menyimpan nilai dalam format ini:

<textarea>someString</textarea>

Jadi attr("value","someString")dapatkan hasil ini untuk Anda:

<textarea value="someString">someOLDString</textarea>.

coba $("#textareaid").val()atau $("#textareaid").innerHTMLsebaliknya.


5

Area teks tidak memiliki nilai. jQuery .html () berfungsi dalam kasus ini

$("textarea#ExampleMessage").html(result.exampleMessage);

2
tidak, html()hanya berfungsi sekali per textarea, lain kali, Anda ingin mengubah konten secara dinamis textarea, html()tidak akan berfungsi ...
Legionar

dan jika Anda melakukannya .empty (). html ('newContent') @Legionar?
VH

3

Ini bekerja untuk saya .... Saya telah membangun dinding buku wajah ...

Inilah dasar dari kode saya:

// SETS MY TEXT AREA TO EMPTY (NO VALUE)
$('textarea#message_wall').val('');

3

Untuk mengatur textarea nilai HTML yang dikodekan (untuk ditampilkan sebagai HTML) Anda harus menggunakan .html( the_var )tetapi seperti yang disebutkan jika Anda mencoba dan mengaturnya lagi itu mungkin (dan mungkin) tidak akan berfungsi.

Anda dapat memperbaiki ini dengan mengosongkan textarea .empty()dan kemudian mengaturnya lagi dengan.html( the_var )

Inilah JSFiddle yang berfungsi: https://jsfiddle.net/w7b1thgw/2/

jQuery(function($){
    
    $('.load_html').click(function(){
        var my_var = $(this).data('my_html');
        $('#dynamic_html').html( my_var ); 
    });
    
    $('#clear_html').click(function(){
        $('#dynamic_html').empty(); 
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="dynamic_html"></textarea>
<a id="google_html" class="load_html" href="#" data-my_html="&lt;a href=&quot;google.com&quot;&gt;google.com&lt;/a&gt;">Google HTML</a>
<a id="yahoo_html" class="load_html" href="#" data-my_html="&lt;a href=&quot;yahoo.com&quot;&gt;yahoo.com&lt;/a&gt;">Yahoo HTML</a>
<a id="clear_html" href="#">Clear HTML</a>


2

Saya mencoba .val() .text() .html()dan memiliki beberapa bug menggunakan jQuery untuk membaca atau mengatur nilai textarea ... i endup menggunakan js asli

$('#message').blur(function() {    
    if (this.value == '') { this.value = msg_greeting; }
});



2

Saya pikir ada satu aspek penting yang hilang:

$('#some-text-area').val('test');

hanya berfungsi ketika ada pemilih ID (#)

untuk pemilih kelas ada opsi untuk menggunakan nilai asli seperti:

$('.some-text-area')[0].value = 'test';

1

Jawaban yang diterima berfungsi untuk saya, tetapi hanya setelah saya menyadari saya harus mengeksekusi kode saya setelah halaman selesai dimuat. Dalam situasi ini skrip inline tidak berfungsi, saya kira karena #my_form belum selesai memuat.

$(document).ready(function() {
  $("#my_form textarea").val('');
});

pdub23, selalu lebih baik untuk mengomentari jawaban yang diterima daripada membuat jawaban baru ...
Fábio Batista

1

Anda bahkan dapat menggunakan cuplikan di bawah ini.

$("textarea#ExampleMessage").append(result.exampleMessage);

1

Ketika saya memiliki JQuery v1.4.4 di halaman, keduanya tidak berfungsi. Saat menyuntikkan JQuery v1.7.1 ke halaman saya, akhirnya berhasil. Jadi dalam kasus saya, itu adalah versi JQuery saya yang menyebabkan masalah.

id ==> textareaid

======================

var script1 = document.createElement("script");
script1.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
document.body.appendChild(script1);

var script2 = document.createElement("script"); 
script2.type = "text/javascript"; 
script2.innerHTML = "var $jq171 = $.noConflict();"; 
document.body.appendChild(script2);

$jq171('#textareaid').val('xxx');

1

Saya telah menggunakan $(textarea).val/html/text(any_str_var)semua bekerja untuk saya. Jika Anda ingin memastikan bahwa variabel Anda sebagai string ditambahkan ke textarea, Anda selalu dapat menambahkan seperti:

$(textarea).val(unknown_var + '')

Metode .val () pasti digunakan pada textarea - lihat: https://api.jquery.com/val/

.html () dapat digunakan untuk mendapatkan atau mengatur konten elemen apa pun - lihat: https://api.jquery.com/html/#html2

.text () sama dengan .html kecuali ini dapat digunakan untuk mengatur konten XML: lihat - https://api.jquery.com/text/#text-text

Anda juga dapat membaca lebih lanjut tentang bagaimana masing-masing bertindak atas karakter khusus dengan masing-masing tautan tersebut.


0

Cukup gunakan kode ini dan Anda akan selalu memiliki nilai:

var t = $(this); var v = t.val() || t.html() || t.text();

Jadi ia akan memeriksa val () dan mengatur nilainya. Jika val () mendapat string kosong, NULL, NaN os itu akan memeriksa html () dan kemudian untuk teks () ...


0

Ini bekerja:

var t = $('#taCommentSalesAdministration');
t.val('Hi');

Ingat, bagian yang sulit di sini adalah memastikan Anda menggunakan ID yang benar. Dan sebelum Anda menggunakan ID, pastikan Anda meletakkannya #terlebih dahulu.


0

Menggunakan $("textarea#ExampleMessage").html('whatever you want to put here');bisa menjadi cara yang baik, karena .val()dapat memiliki masalah ketika Anda menggunakan data dari basis data.

Sebagai contoh:

Bidang database bernama sebagai descriptionmemiliki nilai berikut asjkdfklasdjf sjklñadf. Dalam hal ini menggunakan .val () untuk menetapkan nilai ke textarea bisa menjadi pekerjaan yang membosankan.


0

Saya sudah mencoba mengatur nilai / teks / html menggunakan JQuery tetapi tidak berhasil. Jadi saya mencoba yang berikut ini.

Dalam hal ini saya menyuntikkan elemen textarea baru ke setelah DOM dibuat.

 var valueToDisplay= 'Your text here even with line breaks';
 var textBox = '<textarea class="form-control" >'+ valueToDisplay +'</textarea>';
 $(td).html(textBox);

masukkan deskripsi gambar di sini

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.