在 jQuery 中设置 textarea 的值答案

【问题标题】：Set value of textarea in jQuery在 jQuery 中设置 textarea 的值
【发布时间】：2010-09-29 18:12:58
【问题描述】：

我正在尝试使用带有以下代码的 jquery 在 textarea 字段中设置一个值：

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

问题是，一旦这段代码执行，它并没有改变 textarea 中的文本？

但是在执行alert($("textarea#ExampleMessage").attr("value")) 时会返回新设置的值？

【问题讨论】：

如果 jQuery 魔法无法在上设置 val()，并且您按 ID 定位，则很可能存在多个具有相同 ID 的元素。

标签： jquery textarea

【解决方案1】：

你试过 val 吗？

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

【讨论】：

基本正确，虽然 val 确实需要时间来确保您设置的值是一个字符串，并且 attr 似乎总体上更神奇。
是的。 textarea 没有 value 属性，而 input 有。
同意，但 val() 在这种情况下设置它。他们 [jquery] 必须确定它的 textarea 类型并设置文本。
textarea 有一个值 (JavaScript) 属性，就像文本输入一样。它没有 HTML value 属性，但这没关系，因为 val() 和 attr('value') 都写入 JavaScript value 属性。注意，attr()not 设置 HTML 属性！它只设置 JavaScript 属性，同时试图隐藏名称不同的类/类名等情况的差异。但是你仍然会看到属性和属性做不同事情的地方的区别，比如在表单元素中。
val(foo) 为我工作（jQuery 1.9.1）。使用text(foo) loss 更新textarea 内容会丢失IE 上的换行符，使用val(foo) 会保留它们。

【解决方案2】：

Textarea 没有 value 属性，它的 value 位于标签之间，即：<textarea>my text</textarea>，它不像输入字段（<input value="my text" />）。这就是 attr 不起作用的原因:)

【讨论】：

【解决方案3】：

$("textarea#ExampleMessage").val() 在 jquery 中只是一个魔法。

您应该注意到 textarea 标签使用 inner html 来显示，而 不在 value 属性中，就像输入标签一样。

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

你应该使用

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

或

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

取决于你想把它显示为html标签还是纯文本。

【讨论】：

你是对的，textarea 没有 val 或 value，jquery 只是在做一些魔术，让开发人员的生活更轻松。
不叫魔术，叫抽象。 textarea 只有 1 和 0，但您计算机中的所有抽象层都为您隐藏了这些。可以指出来，但请不要因为这样的原因要求人们对其他答案投反对票...... :)
当心 - html() 执行脚本标签。
来自jQuery API ".text() 方法不能用于表单输入或脚本。要设置或获取输入或 textarea 元素的文本值，请使用 .val() 方法。获取脚本元素的值，使用 .html() 方法。"

【解决方案4】：

哦，男孩们加油！它只适用于

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

【讨论】：

仅当您使用 ID 选择器时。我不能，因为我的是第三方生成的代码

【解决方案5】：

我认为这应该可行：

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

【讨论】：

【解决方案6】：

在 android 上 .val 和 .html 不起作用。

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

完成了任务。

【讨论】：

来自jQuery API ".text() 方法不能用于表单输入或脚本。要设置或获取输入或 textarea 元素的文本值，请使用 .val() 方法。获取脚本元素的值，使用 .html() 方法。"
是的。但令我惊讶的是，这奏效了。在.net C# Razor textarea 上，当我通过单击操作 dom 以添加更多字段时。我用它来保持现有字段的状态值 $('#id').text($('#id').val());

【解决方案7】：

我有同样的问题，所以我决定在当前的浏览器中尝试它（我们在这个问题之后的一年半之后），这个 (.val) 有效

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

为

IE8
FF 3.6
FF4
歌剧 11
铬 10

【讨论】：

作为记录，jQuery 的一项特殊功能是提供浏览器兼容性，所以是的，.val() 很可能会在多个浏览器中发挥其魔力 ;)

【解决方案8】：

我有同样的问题，这个解决方案没有用，但有效的是使用 html

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

【讨论】：

不，html() 每个 textarea 只工作一次，下次你要动态更改 textarea 的内容，html() 将无法工作...
@Legionar 那么如何处理这种情况？
好吧，这个帮助了我stackoverflow.com/questions/1219860/… 使用这些函数我只是使用$('#textarea').val(encodedtext); 在textarea 中设置编码值

【解决方案9】：

textarea 不将值存储为

<textarea value="someString">

相反，它以这种格式存储值：

<textarea>someString</textarea>

所以attr("value","someString") 会得到这个结果：

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

改用$("#textareaid").val() 或$("#textareaid").innerHTML。

【讨论】：

【解决方案10】：

问题是：我需要从给定 div 的包含中生成 html 代码。然后，我必须把这个原始的 html 代码放在一个 textarea 中。当我像这样使用$(textarea).val() 函数时：

$(textarea).val("some html like < input type='text' value='' style="background: 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='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>

而无法填充文本区域的 javascript/jquery 代码是：

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

终于解决了：

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

诀窍是用 span 标签包裹你的 textarea 以帮助使用 replaceWith 功能。我不确定它是否很干净，但是在文本区域中添加原始 html 代码也很完美。

【讨论】：

【解决方案11】：

文本区域没有价值。 jQuery .html() 在这种情况下有效

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

【讨论】：

不，html() 每个 textarea 只工作一次，下次你要动态更改 textarea 的内容，html() 将无法工作...
如果你做了 .empty().html('newContent') @Legionar ?

【解决方案12】：

我认为缺少一个重要方面：

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

仅在有 ID 选择器 (#) 时有效

对于类选择器，有一个使用原生值的选项，例如：

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

【讨论】：

【解决方案13】：

它对我有用.... 我已经建立了一个脸书墙...

这是我的代码的基础：

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

【讨论】：

【解决方案14】：

要设置编码 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>

【讨论】：

【解决方案15】：

我尝试使用 .val() .text() .html() 并在使用 jQuery 读取或设置文本区域的值时遇到了一些错误...我最终使用本机 js

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

【讨论】：

【解决方案16】：

你甚至可以使用下面的 sn-p。

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

【讨论】：

【解决方案17】：

我们可以使用 .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

【讨论】：

【解决方案18】：

只需按其类型使用 textarea Id 即可：

$("textarea#samplID").val()

【讨论】：

【解决方案19】：

我用过$(textarea).val/html/text(any_str_var) 都为我工作。如果您想确保将您的变量作为字符串添加到 textarea，您始终可以像这样连接：

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

.val() 方法肯定用于 textarea - 请参阅：https://api.jquery.com/val/

.html() 可用于获取或设置任何元素的内容 - 请参阅：https://api.jquery.com/html/#html2

.text() 与 .html 相同，但可用于设置 XML 内容：参见 - https://api.jquery.com/text/#text-text

您还可以详细了解每个链接如何作用于特殊字符。

【讨论】：

【解决方案20】：

在我的情况下，我在 iframe 中有这个输入，以上任何一个都解决了我的问题，但是这个：

我就是这样解决的：

$('#myId')[0].value="MY VALUE";

我的输入框：

<textarea name="cmyInput" rows="2" cols="20" id="myId" class="nd" ignoreautotab="1"></textarea>

【讨论】：

【解决方案21】：

接受的答案对我有用，但只有在我意识到我必须在页面完成加载后执行我的代码之后。在这种情况下，内联脚本不起作用，我猜是因为 #my_form 尚未完成加载。

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

【讨论】：

pdub23，评论接受的答案总是比创建新答案更好......

【解决方案22】：

当我在页面中有 JQuery v1.4.4 时，这些都不起作用。将 JQuery v1.7.1 注入我的页面时，它终于起作用了。所以就我而言，是我的 JQuery 版本导致了问题。

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

【讨论】：

【解决方案23】：

只需使用此代码，您将永远拥有价值：

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

所以它会检查 val() 并设置它的值。如果 val() 得到一个空字符串，NULL，NaN o.s.它将检查 html() 然后检查 text()...

【讨论】：

【解决方案24】：

这行得通：

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

请记住，这里的棘手部分是确保您使用正确的 ID。在使用 ID 之前，请确保在其前面加上 #。

【讨论】：

【解决方案25】：

使用$("textarea#ExampleMessage").html('whatever you want to put here'); 可能是一个好方法，因为.val() 在您使用数据库中的数据时可能会出现问题。

例如：

名为description 的数据库字段具有以下值asjkdfklasdjf sjklñadf。在这种情况下，使用 .val() 为 textarea 赋值可能是一项乏味的工作。

【讨论】：

【解决方案26】：

我尝试使用 JQuery 设置值/文本/html，但没有成功。所以我尝试了以下方法。

在这种情况下，我将新的 textarea 元素注入到创建后的 DOM 中。

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

【讨论】：

【解决方案27】：

在上面添加一些很棒的 ? 答案，在您使用多表单并且元素 NAME 是您想要定位的情况下。

$('textarea[name=ExampleMessageElName]').val('Some Message here');

【讨论】：