Đặt giá trị của textarea trong jQuery


525

Tôi đang cố gắng đặt giá trị trong trường textarea bằng jquery với mã sau:

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

Vấn đề là, một khi mã này thực thi, nó không làm thay đổi văn bản trong textarea?

Tuy nhiên, khi thực hiện một alert($("textarea#ExampleMessage").attr("value"))giá trị mới được thiết lập được trả lại?


3
Nếu ma thuật jQuery không hoạt động để đặt val () trên <textarea> và bạn đang nhắm mục tiêu theo ID, có thể có nhiều yếu tố có cùng một ID.
billrichards

Câu trả lời:


877

Bạn đã thử val chưa?

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

5
chủ yếu là đúng, mặc dù val mất thời gian để đảm bảo giá trị bạn đặt là một chuỗi và attr dường như làm một phép thuật tổng thể hơn một chút.
enobrev

62
Vâng. Một textarea không có thuộc tính giá trị, trong khi đầu vào thì có.
MDCore

14
Đồng ý, nhưng val () đang đặt nó trong trường hợp này. Họ [jquery] phải xác định loại textarea và đặt văn bản.
GONeale

17
textarea có thuộc tính value (JavaScript) giống như nhập văn bản. Nó không có valuethuộc tính HTML , nhưng điều đó không quan trọng, bởi vì cả hai val()attr('value')ghi vào thuộc tính giá trị JavaScript. Lưu ý, attr()không phải thiết lập thuộc tính HTML! Nó chỉ đặt các thuộc tính JavaScript, trong khi cố gắng che giấu sự khác biệt cho các trường hợp như class / className nơi tên khác nhau. Nhưng bạn vẫn sẽ thấy sự khác biệt cho các vị trí nơi thuộc tính và thuộc tính làm những việc khác nhau, chẳng hạn như trong các thành phần biểu mẫu.
bobince

2
val(foo)hoạt động với tôi (jQuery 1.9.1). Sử dụng text(foo)thua để cập nhật nội dung textarea làm mất các ngắt dòng trên IE, sử dụng val(foo)bảo tồn chúng.
Tim

77

Textarea không có thuộc tính giá trị, giá trị của nó nằm giữa các thẻ, nghĩa là : <textarea>my text</textarea>, nó không giống như trường đầu vào ( <input value="my text" />). Đó là lý do tại sao attr không hoạt động :)


50

$("textarea#ExampleMessage").val() trong jquery chỉ là một phép thuật.

Bạn nên chú ý rằng thẻ textarea sử dụng html bên trong để hiển thị và không thuộc tính value giống như thẻ đầu vào.

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

Bạn nên sử dụng

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

hoặc là

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

phụ thuộc vào việc bạn muốn hiển thị nó dưới dạng thẻ html hay văn bản thuần túy.


1
Bạn đã đúng, textarea không có giá trị hoặc giá trị, và jquery chỉ làm một số phép thuật để làm cho cuộc sống dễ dàng hơn cho nhà phát triển.
Scott Kirkwood

16
Nó không được gọi là ma thuật, nó được gọi là trừu tượng. textarea chỉ là 1 và 0, nhưng tất cả các lớp trừu tượng trong máy tính của bạn đều che giấu điều đó cho bạn. Bạn có thể chỉ ra điều đó, nhưng xin đừng yêu cầu mọi người hạ thấp câu trả lời khác vì một lý do như vậy ... :)
Espen Herseth Halvorsen

8
hãy cẩn thận - html () thực thi các thẻ script.
Lincoln B

3
Từ API jQuery "Phương thức .text () không thể được sử dụng trên các đầu vào biểu mẫu hoặc tập lệnh. Để đặt hoặc lấy giá trị văn bản của các phần tử đầu vào hoặc văn bản, hãy sử dụng phương thức .val (). Để lấy giá trị của phần tử tập lệnh, hãy sử dụng phương thức .html (). "
phi công

20

Ôi thôi nào các chàng trai! nó hoạt động chỉ với

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

Chỉ khi bạn sử dụng bộ chọn ID. Tôi không thể vì mã của tôi là mã do bên thứ ba tạo
Jack

16

Tôi nghĩ rằng điều này sẽ làm việc :

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

10

Tôi đã có cùng một câu hỏi vì vậy tôi đã quyết định dùng thử trong các trình duyệt hiện tại (chúng tôi một năm rưỡi sau đó sau câu hỏi này) và điều này ( .val) hoạt động

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

cho

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

1
Đối với bản ghi, một trong những chức năng đặc biệt của jQuery là một trong những tính năng tương thích trình duyệt, vì vậy, có khả năng nó .val()sẽ làm được điều kỳ diệu của nó trong một số trình duyệt;)
diosney

9

Trên Android .val.htmlkhông hoạt động.

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

đã làm công việc.


1
Từ API jQuery "Phương thức .text () không thể được sử dụng trên các đầu vào biểu mẫu hoặc tập lệnh. Để đặt hoặc lấy giá trị văn bản của các phần tử đầu vào hoặc văn bản, hãy sử dụng phương thức .val (). Để lấy giá trị của phần tử tập lệnh, hãy sử dụng phương thức .html (). "
phi công

8

Tôi gặp vấn đề tương tự và giải pháp này không hiệu quả nhưng điều làm việc là sử dụng html

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

3
không, html()chỉ hoạt động một lần trên mỗi textarea, lần sau, bạn muốn thay đổi linh hoạt nội dung của textarea, html()sẽ không hoạt động ...
Legionar

@Legionar thì xử lý trường hợp này thế nào?
Jawand Singh

tốt, cái này đã giúp tôi stackoverflow.com/questions/1219860/ bằng cách sử dụng các hàm này tôi chỉ đặt giá trị được mã hóa trong textarea bằng cách sử dụng$('#textarea').val(encodedtext);
Jawand Singh

5

Có vấn đề: Tôi cần tạo mã html từ chứa một div đã cho. Sau đó, tôi phải đặt mã html thô này vào một vùng văn bản. Khi tôi sử dụng hàm $ (textarea) .val () như thế này:

$ (textarea) .val ("một số html như <input type = 'text' value = '' style =" background: url ('http://www.w.com/bg.gif') repeat-x centre; "/> bla bla");

hoặc là

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

Tôi gặp vấn đề với một số ký tự đặc biệt (& '") khi chúng ở giữa dấu ngoặc kép. Nhưng khi tôi sử dụng hàm: $ (textarea) .html () thì văn bản vẫn ổn.

Có một mẫu ví dụ:

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

Và mã javascript / jquery không hoạt động để điền vào textarea là:

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

Cuối cùng là giải pháp:

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

Thủ thuật là bọc textarea của bạn bằng thẻ span để trợ giúp với chức năng thay thế. Tôi không chắc nó có sạch không, nhưng nó hoạt động hoàn hảo khi thêm mã html thô vào vùng văn bản.


5

textarea không lưu trữ giá trị như

<textarea value="someString">

thay vào đó, nó lưu trữ các giá trị theo định dạng này:

<textarea>someString</textarea>

Vì vậy, attr("value","someString")có được kết quả này cho bạn:

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

thử $("#textareaid").val()hoặc $("#textareaid").innerHTMLthay thế.


5

Vùng văn bản không có giá trị. jQuery .html () hoạt động trong trường hợp này

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

2
không, html()chỉ hoạt động một lần trên mỗi textarea, lần sau, bạn muốn thay đổi linh hoạt nội dung của textarea, html()sẽ không hoạt động ...
Legionar

và nếu bạn đã làm .empty (). html ('newContent') @Legionar?
VH

3

Nó hoạt động với tôi .... Tôi đã xây dựng một bức tường mặt ...

Đây là cơ sở của mã của tôi:

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

3

Để đặt giá trị textarea của HTML được mã hóa (để hiển thị dưới dạng HTML), bạn nên sử dụng .html( the_var ) nhưng như đã đề cập nếu bạn thử và đặt lại, nó có thể (và có thể) sẽ không hoạt động.

Bạn có thể khắc phục điều này bằng cách làm trống vùng văn bản .empty()và sau đó thiết lập lại bằng.html( the_var )

Đây là một JSFiddle đang hoạt động: 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

Tôi đã thử .val() .text() .html()và có một số lỗi khi sử dụng jQuery để đọc hoặc đặt giá trị của textarea ... tôi kết thúc bằng js gốc

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

2

Chúng ta có thể sử dụng các phương thức .val () hoặc .text () để đặt giá trị. chúng ta cần đặt giá trị bên trong val () như val ("xin chào").

  $(document).ready(function () {
    $("#submitbtn").click(function () {
      var inputVal = $("#inputText").val();
      $("#txtMessage").val(inputVal);
    });
  });

Kiểm tra ví dụ ở đây: http://www.codegateway.com/2012/03/set-value-to-textarea-jquery.html



2

Tôi nghĩ thiếu một khía cạnh quan trọng:

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

chỉ hoạt động khi có bộ chọn ID (#)

đối với bộ chọn lớp, có một tùy chọn để sử dụng giá trị gốc như:

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

1

Câu trả lời được chấp nhận hoạt động với tôi, nhưng chỉ sau khi tôi nhận ra tôi phải thực thi mã của mình sau khi tải xong trang. Trong tình huống này, tập lệnh nội tuyến không hoạt động, tôi đoán vì #my_form chưa tải xong.

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

pdub23, bình luận về câu trả lời được chấp nhận luôn tốt hơn là tạo ra một câu trả lời mới
Fábio Batista

1

Bạn thậm chí có thể sử dụng đoạn trích dưới đây.

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

1

Khi tôi có JQuery v1.4.4 trong trang, cả hai đều không hoạt động. Khi đưa JQuery v1.7.1 vào trang của tôi, nó đã hoạt động cuối cùng. Vì vậy, trong trường hợp của tôi, chính phiên bản JQuery của tôi đã gây ra sự cố.

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

Tôi đã sử dụng $(textarea).val/html/text(any_str_var)tất cả làm việc cho tôi. Nếu bạn muốn chắc chắn rằng biến của bạn dưới dạng một chuỗi được thêm vào textarea, bạn luôn có thể nối như vậy:

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

Phương thức .val () chắc chắn được sử dụng trên textarea - xem: https://api.jquery.com/val/

.html () có thể được sử dụng để lấy hoặc đặt nội dung của bất kỳ phần tử nào - xem: https://api.jquery.com/html/#html2

.text () giống như .html ngoại trừ điều này có thể được sử dụng để đặt nội dung XML: see - https://api.jquery.com/text/#text-text

Bạn cũng có thể đọc thêm về cách mỗi hành động đối với các ký tự đặc biệt với mỗi liên kết đó.


0

Chỉ cần sử dụng mã này và bạn sẽ luôn có giá trị:

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

Vì vậy, nó sẽ kiểm tra val () và đặt giá trị của nó. Nếu val () nhận được một chuỗi rỗng, NULL, NaN os, nó sẽ kiểm tra html () và sau đó cho văn bản () ...


0

Những công việc này:

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

Hãy nhớ rằng, phần khó khăn ở đây là đảm bảo bạn sử dụng ID chính xác. Và trước khi bạn sử dụng ID, hãy chắc chắn rằng bạn đặt #trước nó.


0

Sử dụng $("textarea#ExampleMessage").html('whatever you want to put here');có thể là một cách tốt, bởi vì .val()có thể có vấn đề khi bạn đang sử dụng dữ liệu từ cơ sở dữ liệu.

Ví dụ:

Một trường cơ sở dữ liệu có tên là descriptioncó giá trị sau asjkdfklasdjf sjklñadf. Trong trường hợp này, sử dụng .val () để gán giá trị cho textarea có thể là một công việc tẻ nhạt.


0

Tôi đã cố gắng đặt giá trị / văn bản / html bằng JQuery nhưng không thành công. Vì vậy, tôi đã thử như sau.

Trong trường hợp này, tôi đã đưa phần tử textarea mới vào sau khi DOM được tạo.

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

nhập mô tả hình ảnh ở đây

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.