在jQuery中设置textarea的值

时间:2009-01-06 06:04:00

标签: jquery textarea

我正在尝试使用jquery在textarea字段中设置一个值,代码如下:

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

问题是,一旦执行此代码,它不会改变textarea中的文本吗?

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

27 个答案:

答案 0 :(得分:819)

你试过val吗?

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

答案 1 :(得分:71)

Textarea没有值属性,它的值介于标签之间,即:<textarea>my text</textarea>,它与输入字段(<input value="my text" />)不同。这就是为什么attr不起作用的原因:)。

答案 2 :(得分:45)

jquery中的

$("textarea#ExampleMessage").val()只是一种魔力。

您应该注意 textarea 标记使用内部html 来显示,不在值属性就像输入标记一样。

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

你应该使用

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

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

取决于您是否要将其显示为html标签或纯文本。

答案 3 :(得分:15)

噢,来吧男生!它只适用于

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

答案 4 :(得分:14)

我认为这应该有效:

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

答案 5 :(得分:10)

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

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

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

答案 6 :(得分:8)

在Android .val.html上无效。

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

完成了这项工作。

答案 7 :(得分:8)

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

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

答案 8 :(得分:5)

Textarea没有价值。 jQuery .html()适用于这种情况

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

答案 9 :(得分:5)

有问题:我需要从给定div的包含中生成html代码。然后,我必须将这个原始的html代码放在textarea中。当我使用函数$(textarea).val()时:

  

$(textarea).val(“有些html喜欢&lt;输入   type ='text'value =''style =“background:url('http://www.w.com/bg.gif')repeat-x center;” /&GT; bla bla“);

  

$( '#idTxtArGenHtml')。VAL(   $('idDivMain')。html());

当它们介于quot之间时,我遇到了一些特殊字符(&amp;'“)的问题。但是当我使用该函数时:  $(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>

无法填充textarea的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函数。 我不确定它是否非常干净,但它的工作也很完美,在textarea中添加原始html代码。

答案 10 :(得分:4)

textarea不会将值存储为

<textarea value="someString">

相反,它以这种格式存储值:

<textarea>someString</textarea>

所以attr("value","someString")可以获得这个结果:

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

尝试$("#textareaid").val()$("#textareaid").innerHTML

答案 11 :(得分:3)

要设置编码HTML的textarea值(显示为HTML),您应该使用.html( the_var )但如上所述,如果您尝试再次设置它可能(并且可能)不起作用。

您可以通过清空textarea .empty(),然后使用.html( the_var )

重新设置来解决此问题。

这是一个有效的JSFiddle: https://jsfiddle.net/w7b1thgw/2/

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

答案 12 :(得分:2)

我尝试使用.val() .text() .html()并使用jQuery来读取或设置textarea的值...使用原生js

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

答案 13 :(得分:2)

它对我有用.... 我已经建了一本面书墙......

以下是我的代码的基础:

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

答案 14 :(得分:2)

我们可以使用.val()或.text()方法来设置值。我们需要将值放在val()中,如val(“hello”)。

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

答案 15 :(得分:1)

我用过$(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

您还可以通过每个链接进一步了解每个字符如何作用于特殊字符。

答案 16 :(得分:1)

只需按类型使用textarea Id:

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

答案 17 :(得分:1)

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

我就是这样解决的:

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

我的输入字段:

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

答案 18 :(得分:1)

当我在页面中使用JQuery v1.4.4时,这些都不起作用。将JQuery v1.7.1注入到我的页面时,它终于工作了。所以在我的情况下,导致问题的是我的JQuery版本。

id ==&gt; 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');

答案 19 :(得分:1)

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

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

答案 20 :(得分:1)

您甚至可以使用以下代码段。

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

答案 21 :(得分:0)

这有效:

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

请记住,这里棘手的部分是确保使用正确的ID。 在使用ID之前,请确保将#放在它之前。

答案 22 :(得分:0)

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

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

仅在有ID选择器(#)

时才有效

对于类选择器,有一个选项可以使用本机值,如:

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

答案 23 :(得分:0)

只需使用此代码,您将始终拥有以下值:

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

因此它将检查val()并设置其值。如果val()得到一个空字符串,NULL,NaN o.s.它将检查html()然后检查text()...

答案 24 :(得分:0)

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

在这种情况下,我正在向创建后的DOM注入新的textarea元素。

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

enter image description here

答案 25 :(得分:0)

在您使用多格式且元素NAME是您要定位的情况下,请在上面的?答案中添加一个很好的答案。

unsent_orders = JsonConvert.DeserializeObject<Android.Runtime.JavaList<Order>>(json);

答案 26 :(得分:0)

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

例如:

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