web-dev-qa-db-ja.com

JQueryのtextareaの設定値

次のコードでjqueryを使用してtextareaフィールドに値を設定しようとしています。

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

問題は、このコードが実行されても、テキスト領域のテキストが変更されないことです。

しかし、alert($("textarea#ExampleMessage").attr("value"))を実行すると、新しく設定された値が返されますか？

jquerytextarea
488
GONeale

あなたはvalを試しましたか？

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

Textareaにはvalue属性がなく、その値はタグの間にあります。つまり、<textarea>my text</textarea>です。入力フィールド（<input value="my text" />）とは異なります。それがattrが機能しない理由です:)

70
danivalentin

jqueryの$("textarea#ExampleMessage").val()は単なる魔法です。

textarea タグを inner html を使用して表示し、 value属性にはない を使用して、/ inputタグとまったく同じことに気付くはずです。

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

あなたが使うべきです

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

または

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

hTMLタグとして表示するのか、プレーンテキストとして表示するのかによって異なります。

45
CallMeLaNN

ああ、男の子に来て！それだけで動作します

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

私はこれがうまくいくと思います：

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

私は同じ質問をしていたので、現在のブラウザで試してみることにし（この質問の1年半後に）、これ（.val）は動作します

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

for

  • IE8
  • FF 3.6
  • FF4
  • オペラ11
  • Chrome 10
10
Michel

Androidでは.valと.htmlは動作しませんでした。

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

仕事をしました。

8
Dan Ochiana

私は同じ問題を抱えていて、この解決策はうまくいきませんでしたが、うまくいったのはhtmlを使うことでした

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

テキストエリアには値がありません。この場合、jQuery .html（）は機能します

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

そこに問題があります：私は与えられたdivの包含からHTMLコードを生成する必要があります。それから、この生のHTMLコードをtextareaに入れる必要があります。私がこのように$（textarea）.val（）関数を使うと：

$（textarea）.val（ "<input type = 'text' value = '' style ="のようなHTML背景：url（ 'http://www.w.com/bg.gif'）repeat-x center; "/> bla bla"）;

または

$（ '＃idTxtArGenHtml'）。val（$（ 'idDivMain'）。html（））;

引用符の間にある特殊文字（＆ '"）に問題がありましたが、関数$（textarea）.html（）を使用するとテキストは問題ありません。

フォームの例があります：

<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='[email protected]' /></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>

そしてテキストエリアを埋めるために働かないjavascript/jqueryコードは以下の通りです：

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

解決策を完成させます。

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

テクニックはreplaceWith関数を助けるためにspanタグであなたのtextareaを包むことです。きれいかどうかはわかりませんが、生のHTMLコードをテキストエリアに追加しても問題ありません。

5
Mathieua

textareaは値を

<textarea value="someString">

代わりに、このフォーマットで値を保存します。

<textarea>someString</textarea>

だからattr("value","someString")はあなたにこの結果を取得します：

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

代わりに$("#textareaid").val()または$("#textareaid").innerHTMLを試してください。

4
Luka Ramishvili

エンコードされたHTMLのtextarea値を（HTMLとして表示するために）設定するには.html( the_var )を使用する必要があります。

これを修正するには、テキストエリア.empty()を空にしてから.html( the_var )で再度設定します。

これが動作しているJSFiddleです： 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>
3
sMyles

値を設定するには、.val（）または.text（）メソッドを使用できます。 val（ "hello"）のようにval（）の中に値を入れる必要があります。

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

ここで例をチェックしてください： http://www.codegateway.com/2012/03/set-value-to-textarea-jquery.html

2
Avinash

私は.val().text().html()を試してみたし、jQueryを使ってテキストエリアの値を読み込んだり設定したりするバグがいくつかありました。

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

それは私のために動作します....私はフェイスブックの壁を建てました...

これが私のコードの基本です。

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

そのような種類でtextarea Idを使うだけです。

$("textarea#samplID").val()
1
S.Mohamed Mahdi Ahmadian zadeh

受け入れられた答えは私のために働きます、しかし私がページがロードを終えた後に私が私のコードを実行しなければならなかったと気づいた後にだけ。このような状況では、インラインスクリプトは機能しませんでした。#my_formがまだロードされていないためです。

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

下のスニペットを使うこともできます。

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

このページにJQuery v1.4.4があったときは、どちらもうまくいきませんでした。私のページにJQuery v1.7.1をインジェクトすると、ついにうまくいきました。したがって、私の場合は、問題を引き起こしていたのは私のJQueryバージョンでした。

id ==>テキストエリア

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

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
MacGyver

データベースからのデータを使用しているときは$("textarea#ExampleMessage").html('whatever you want to put here');に問題がある可能性があるため、.val()を使用することは良い方法です。

例えば：

descriptionという名前のデータベースフィールドは、次の値asjkdfklasdjf sjklñadfを持ちます。この場合、textareaに値を割り当てるために.val（）を使用するのは面倒な作業です。

0
user306265

このコードを使うだけで、あなたはいつも値を持つことになります。

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

それでval（）をチェックしてその値を設定します。 val（）が空の文字列、NULL、NaNを取得した場合。それはhtml（）そしてtext（）をチェックします...

0
Simon

重要な点が1つ欠けていると思います。

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

iDセレクター（＃）がある場合にのみ機能します。

クラスセレクタには、次のようにネイティブな値を使用するオプションがあります。

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

これは動作します：

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

覚えておいて、ここで注意が必要な部分は、あなたが正しいIDを使うことを確認することです。そして、IDを使う前に、必ずその前に#を付けてください。

0
ADL