Definir valor da área de texto no jQuery


525

Estou tentando definir um valor em um campo de área de texto usando jquery com o seguinte código:

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

O problema é que, uma vez que esse código é executado, ele não está alterando o texto na área de texto?

No entanto, ao executar um alert($("textarea#ExampleMessage").attr("value"))valor recém-definido, é retornado?


3
Se a mágica do jQuery não estiver funcionando para definir val () em <textarea>, e você estiver segmentando por ID, é provável que haja vários elementos com o mesmo ID.
billrichards

Respostas:


877

Você já tentou val?

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

5
principalmente verdade, embora val dedique algum tempo para garantir que o valor que você está definindo seja uma string, e attr parece fazer um pouco mais de mágica em geral.
enobrev

62
Sim. Uma área de texto não possui um atributo value, enquanto uma entrada possui.
MDCore 6/01/09

14
Concordou, mas val () está definindo-o neste caso. Eles [jquery] devem determinar seu tipo de área de texto e definir o texto.
GONeale

17
textarea possui uma propriedade value (JavaScript) como uma entrada de texto. Ele não tem um valueatributo HTML , mas isso não importa, porque ambos val()e attr('value')gravam na propriedade value do JavaScript. Note, attr()se não definir atributos HTML! Ele define apenas as propriedades do JavaScript, enquanto tenta ocultar a diferença para casos como class / className em que o nome é diferente. Mas você ainda verá a diferença nos locais em que o atributo e a propriedade fazem coisas diferentes, como nos elementos do formulário.
9990

2
val(foo)funciona para mim (jQuery 1.9.1). O uso de text(foo)perde para atualizar o conteúdo da área de texto perde as quebras de linha no IE, usando as val(foo)preserva.
Tim

77

A área de texto não possui atributo value, seu valor é entre tags, ou seja: <textarea>my text</textarea>não é como o campo de entrada ( <input value="my text" />). É por isso que attr não funciona :)


50

$("textarea#ExampleMessage").val() em jquery apenas uma mágica.

Você deve observar que a tag textarea usa o html interno para exibir e não o atributo value, assim como a tag de entrada.

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

Você deveria usar

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

ou

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

depende se você deseja exibi-lo como tags html ou texto sem formatação.


1
Você está correto, a área de texto não tem um valor ou valor, e o jquery está apenas fazendo alguma mágica para facilitar a vida do desenvolvedor.
26910 Scott Scott Kirkwood

16
Não é chamado de mágica, é chamado de abstração. textarea tem apenas 1 e 0, mas todas as camadas de abstração do seu computador ocultam isso para você. Não há problema em indicá-lo, mas por favor não pedir às pessoas para downvote outras respostas para essa razão, um ... :)
Espen Herseth Halvorsen

8
cuidado - html () executa tags de script.
Lincoln B

3
From jQuery API "O método .text () não pode ser usado em entradas ou scripts de formulário. Para definir ou obter o valor do texto de elementos de entrada ou de área de texto, use o método .val (). Para obter o valor de um elemento de script, use o método .html (). "
pilot

20

Oohh vamos lá meninos! funciona apenas com

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

Somente se você usar um seletor de ID. Eu não posso, como a minha é de terceiros código gerado
Jack

16

Eu acho que isso deve funcionar :

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

10

eu tinha a mesma pergunta, então decidi experimentá-lo nos navegadores atuais (estamos um ano e meio depois dessa pergunta), e isso ( .val) funciona

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

para

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

1
Para o registro, uma das funcionalidades jQuery excepcionais é o de proporcionar a compatibilidade do navegador, então sim, é muito provável que .val()vai fazer a sua magia em vários navegadores;)
diosney

9

No android .vale .htmlnão funcionou.

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

fez o trabalho.


1
From jQuery API "O método .text () não pode ser usado em entradas ou scripts de formulário. Para definir ou obter o valor do texto de elementos de entrada ou de área de texto, use o método .val (). Para obter o valor de um elemento de script, use o método .html (). "
pilot

8

Eu tive o mesmo problema e esta solução não funcionou, mas o que funcionou foi usar html

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

3
não, html()está a trabalhar apenas uma vez por textarea, da próxima vez, você quer alterar o conteúdo de forma dinâmica de textarea, html()não vai funcionar ...
Legionär

@ Legionar então como lidar com este caso?
Jawand Singh 03/10

Bem, este me ajudou stackoverflow.com/questions/1219860/... usando essas funções i apenas definir o valor codificado em textarea usando$('#textarea').val(encodedtext);
Jawand Singh

5

Há o problema: eu preciso gerar código html a partir do conteúdo de uma determinada div. Então, eu tenho que colocar esse código html bruto em uma área de texto. Quando eu uso a função $ (textarea) .val () assim:

$ (textarea) .val ("alguns html como <input type = 'text' value = '' style =" background: url ('http://www.w.com/bg.gif') repeat-x center; "/> bla bla");

ou

$ ('# idTxtArGenHtml');

Eu tive problema com algum caractere especial (& '") quando eles estão entre asp. Mas quando eu uso a função: $ (textarea) .html () o texto está ok.

Há um exemplo de formulário:

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

E o código javascript / jquery que não funciona para preencher a área de texto é:

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

Finalmente a solução:

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

O truque é envolver sua área de texto com uma tag span para ajudar na função replaceWith. Não tenho certeza se é muito limpo, mas é um trabalho perfeito também adicionar código html bruto em uma área de texto.


5

textarea não armazena valores como

<textarea value="someString">

em vez disso, ele armazena valores neste formato:

<textarea>someString</textarea>

Então attr("value","someString")você obtém este resultado:

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

tente $("#textareaid").val()ou em $("#textareaid").innerHTMLvez disso.


5

Área de texto não tem valor. jQuery .html () funciona neste caso

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

2
não, html()está a trabalhar apenas uma vez por textarea, da próxima vez, você quer alterar o conteúdo de forma dinâmica de textarea, html()não vai funcionar ...
Legionär

e se você fez .empty (). html ('newContent') @Legionar?
VH

3

Funciona para mim ... Eu construí uma parede de livro de rosto ...

Aqui está a base do meu código:

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

3

Para definir o valor da área de texto do HTML codificado (para mostrar como HTML), você deve usar .html( the_var ) mas conforme mencionado, se você tentar defini-lo novamente, ele pode (e provavelmente) não funcionará.

Você pode corrigir isso esvaziando a área de texto .empty()e configurando-a novamente com.html( the_var )

Aqui está um JSFiddle em funcionamento: 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

Eu tentei com .val() .text() .html()e teve alguns erros usando jQuery para ler ou definir o valor de uma área de texto ... eu termino usando js nativo

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



2

Acho que falta um aspecto importante:

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

funciona apenas quando há um seletor de ID (#)

para o seletor de classe, existe uma opção para usar o valor nativo como:

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

1

A resposta aceita funciona para mim, mas somente depois que percebi que precisava executar meu código após o carregamento da página. Nessa situação, o script embutido não funcionou, acho que porque #my_form ainda não foi carregado.

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

pdub23, é sempre melhor comentário sobre a resposta aceita do que criar uma nova resposta ...
Fábio Batista

1

Você pode até usar o snippet abaixo.

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

1

Quando eu tinha o JQuery v1.4.4 na página, nenhum deles funcionou. Ao injetar o JQuery v1.7.1 na minha página, funcionou finalmente. Portanto, no meu caso, foi a minha versão do JQuery que estava causando o problema.

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

Eu já usei $(textarea).val/html/text(any_str_var)tudo funcionou para mim. Se você deseja ter certeza de que sua variável como uma string é adicionada à área de texto, você sempre pode concatenar da seguinte maneira:

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

O método .val () é definitivamente usado na área de texto - consulte: https://api.jquery.com/val/

.html () pode ser usado para obter ou definir o conteúdo de qualquer elemento - consulte: https://api.jquery.com/html/#html2

.text () é o mesmo que .html, exceto que isso pode ser usado para definir o conteúdo XML: consulte - https://api.jquery.com/text/#text-text

Você também pode ler mais sobre como cada um age com caracteres especiais em cada um desses links.


0

Basta usar este código e você sempre terá o valor:

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

Portanto, ele verificará val () e definirá seu valor. Se val () obtiver uma string vazia, NULL, NaN os, verificará html () e, em seguida, text () ...


0

Isso funciona:

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

Lembre-se, a parte complicada aqui é garantir que você use o ID correto. E antes de usar o ID, certifique-se de colocá- #lo antes dele.


0

O uso $("textarea#ExampleMessage").html('whatever you want to put here');pode ser uma boa maneira, pois .val()pode haver problemas quando você está usando dados do banco de dados.

Por exemplo:

Um campo de banco de dados chamado as descriptionpossui o seguinte valor asjkdfklasdjf sjklñadf. Nesse caso, usar .val () para atribuir valor à área de texto pode ser um trabalho tedioso.


0

Eu tentei definir valor / texto / html usando JQuery, mas não foi bem-sucedido. Então, eu tentei o seguinte.

Nesse caso, eu estava injetando um novo elemento de área de texto em um DOM após criado.

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

insira a descrição da imagem aqui

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.