在jQuery中设置textarea的值


525

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

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

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

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


3
如果jQuery魔术无法在<textarea>上设置val(),并且您按ID定位,则可能有多个具有相同ID的元素。
billrichards 17-10-25

Answers:


877

您尝试过val吗?

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

5
大多数情况下是正确的,尽管val确实花时间来确保您设置的值是一个字符串,而attr似乎在整体上更具魔力。
enobrev

62
是的 textarea没有值属性,而输入却没有。
MDCore

14
同意,但是val()在此实例中对其进行了设置。他们[jquery]必须确定它的textarea类型并设置文本。
–'GoNeale,

17
textarea具有一个值(JavaScript)属性,就像文本输入一样。它不具有HTML value属性,但不要紧,因为两者val()attr('value')写JavaScript的价值属性。注意,attr()没有设置HTML属性!它仅设置JavaScript属性,同时尝试隐藏名称不同的情况(例如class / className)。但是,对于属性和属性执行不同操作的位置(例如在表单元素中),您仍然会看到差异。
bobince

2
val(foo)为我工作(jQuery 1.9.1)。使用text(foo)丢失来更新文本区域内容会丢失IE上的换行符,而使用val(foo)保留它们。
蒂姆(Tim)

77

Textarea没有值属性,它的值位于标签之间,即:<textarea>my text</textarea>,它不像输入字段(<input value="my text" />)。这就是为什么attr无法正常工作的原因:)


50

$("textarea#ExampleMessage").val() 在jQuery中只是一种魔术。

您应该注意到,textarea标签使用内部html来显示,而不是像input标签一样显示在value属性中

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

你应该用

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

要么

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

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


1
没错,textarea没有val或value,而jquery只是在做一些魔术,使开发人员的生活更轻松。
Scott Kirkwood 2010年

16
这不是魔术,而是抽象。textarea只有1和0,但是计算机中的所有抽象层都为您隐藏了这些内容。可以指出这一点,但是请不要因为这样的原因而要求人们拒绝其他答案……:)
Espen Herseth Halvorsen 2010年

8
当心-html()执行脚本标签。
林肯B

3
来自jQuery API, “ .text()方法不能在表单输入或脚本上使用。要设置或获取input或textarea元素的文本值,请使用.val()方法。要获取脚本元素的值,请使用.html()方法。”
飞行员

20

噢,男孩们!它与

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

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

16

我认为这应该工作:

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

10

我有同样的问题,所以我决定在当前的浏览器中尝试一下(此问题问世一年半后),并且此(.val)可行

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

对于

  • IE8
  • FF 3.6
  • FF4
  • 歌剧11
  • 铬10

1
根据记录,一种出色的jQuery功能是提供浏览器兼容性的一种,因此,是的,很有可能.val()会在几种浏览器中发挥其魔力;)
diosney 2011年

9

在Android .val.html没有工作。

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

做好了


1
来自jQuery API, “ .text()方法不能在表单输入或脚本上使用。要设置或获取input或textarea元素的文本值,请使用.val()方法。要获取脚本元素的值,请使用.html()方法。”
飞行员

8

我有同样的问题,此解决方案不起作用,但有效的方法是使用html

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

3
不,html()每个文本区域只能工作一次,下一次,您想动态更改的内容textareahtml()将无法工作...
Legionar 2014年

@Legionar那么该如何处理呢?
Jawand Singh,

好吧,这帮助了我stackoverflow.com/questions/1219860/…使用这些功能,我只是使用$('#textarea').val(encodedtext);
Jawand Singh

5

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

$(textarea).val(“一些类似<输入类型='文本'值=''的html样式=”背景:url('http://www.w.com/bg.gif')repeat-x中心; “ /> bla bla”);

要么

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

当它们位于quot之间时,我在使用某些特殊字符(&'“)时遇到问题。但是当我使用函数:$(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函数。我不确定它是否很干净,但是它的工作原理也很完美,也可以在textarea中添加原始的html代码。


5

textarea不会将值存储为

<textarea value="someString">

而是以以下格式存储值:

<textarea>someString</textarea>

因此attr("value","someString"),您可以得到以下结果:

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

尝试$("#textareaid").val()还是$("#textareaid").innerHTML代替。


5

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

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

2
不,html()每个文本区域只能工作一次,下一次,您想动态更改的内容textareahtml()将无法工作...
Legionar 2014年

如果您使用.empty()。html('newContent')@Legionar?
VH


3

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


2

我尝试.val() .text() .html()使用jQuery来读取或设置textarea的值并遇到一些错误...我最终使用本机js

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



2

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

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

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

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

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

1

可接受的答案对我有用,但只有在我意识到必须在页面完成加载后执行代码后,我才能这样做。在这种情况下,内联脚本无法正常工作,因为#my_form尚未加载完成。

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

pdub23,它总是最好的评论接受的答案不是创建一个新的答案...
法比奥·巴蒂斯塔

1

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

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

1

当页面中有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');

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

您还可以阅读有关每个链接如何作用于特殊字符的更多信息。


0

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

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

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


0

这有效:

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

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


0

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

例如:

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


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

在此处输入图片说明

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.