web-dev-qa-db-fra.com

Définir la valeur de textarea dans jQuery

J'essaie de définir une valeur dans un champ textarea en utilisant jquery avec le code suivant:

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

La question est, une fois que ce code est exécuté, il ne modifie pas le texte dans la zone de texte?

Cependant, lors de l'exécution d'une alert($("textarea#ExampleMessage").attr("value")), la nouvelle valeur définie est renvoyée?

jquerytextarea
498
GONeale

Avez-vous essayé Val?

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

Textarea n'a pas d'attribut value, sa valeur se situe entre les balises, c'est-à-dire: <textarea>my text</textarea>, ce n'est pas comme le champ de saisie (<input value="my text" />). C'est pourquoi attr ne fonctionne pas :)

73
danivalentin

$("textarea#ExampleMessage").val() dans jQuery juste une magie.

Vous remarquerez que la balise textarea utilise html intérieur pour afficher et pas dans l'attribut value tout comme la balise input.

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

Tu devrais utiliser

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

ou

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

dépend si vous souhaitez l'afficher sous forme de balises HTML ou de texte brut.

46
CallMeLaNN

Oohh allez les garçons! ça marche juste avec

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

Je pense que cela devrait fonctionner:

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

j'avais la même question alors j'ai décidé de l'essayer dans les navigateurs actuels (nous sommes un an et demi plus tard, après cette question), et cela (.val) fonctionne

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

for

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

Sur Android .val et .html ne fonctionnait pas.

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

a fait le travail.

8
Dan Ochiana

J'ai eu le même problème et cette solution n'a pas fonctionné, mais ce qui a fonctionné était d'utiliser du HTML

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

textarea ne stocke pas les valeurs comme

<textarea value="someString">

au lieu de cela, il stocke les valeurs dans ce format:

<textarea>someString</textarea>

Donc, attr("value","someString") vous obtient ce résultat:

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

essayez plutôt $("#textareaid").val() ou $("#textareaid").innerHTML.

5
Luka Ramishvili

Textarea n'a pas de valeur. jQuery .html () fonctionne dans ce cas

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

Là le problème: j'ai besoin de générer du code HTML à partir du contenu d'un div donné. Ensuite, je dois mettre ce code HTML brut dans une zone de texte. Quand j'utilise la fonction $ (textarea) .val () comme ceci:

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

ou

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

J'ai eu un problème avec un caractère spécial (& '") quand ils sont entre". Mais quand j'utilise la fonction: $ (textarea) .html () le texte est ok.

Il y a un exemple de formulaire:

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

Et le code javascript/jquery qui ne fonctionne pas pour remplir la zone de texte est:

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

Enfin la solution:

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

L'astuce consiste à envelopper votre zone de texte avec une balise span pour vous aider avec la fonction replaceWith. Je ne sais pas si c'est très propre, mais c'est un travail parfait aussi, ajoutez du code HTML brut dans une zone de texte.

5
Mathieua

Cela fonctionne pour moi .... j'ai construit un mur de livre de visage ...

Voici la base de mon code:

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

Pour définir la valeur textarea du code HTML codé (pour afficher au format HTML), vous devez utiliser .html( the_var ), mais comme indiqué, si vous essayez de le définir à nouveau, cela pourrait (et probablement) ne fonctionnerait pas.

Vous pouvez résoudre ce problème en vidant la zone de texte .empty(), puis en la réinitialisant avec .html( the_var ).

Voici un JSFiddle qui fonctionne: 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

Nous pouvons utiliser les méthodes .val () ou .text () pour définir des valeurs. nous devons mettre la valeur dans val () comme val ("hello").

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

Voir l'exemple ici: http://www.codegateway.com/2012/03/set-value-to-textarea-jquery.html

2
Avinash

J'ai essayé avec .val().text().html() et j'ai eu quelques bugs qui utilisaient jQuery pour lire ou définir la valeur d'une zone de texte ... i utilisant un js natif

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

Il suffit d'utiliser textarea Id par son type, comme celui-ci:

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

La réponse acceptée fonctionne pour moi, mais seulement après avoir compris que je devais exécuter mon code une fois le chargement de la page terminé. Dans cette situation, le script en ligne ne fonctionnait pas, je suppose parce que #my_form n'avait pas encore fini de charger.

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

Vous pouvez même utiliser l'extrait ci-dessous.

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

Quand j'avais la version 1.4.4 de JQuery dans la page, aucun de ceux-ci ne fonctionnait. Lors de l’injection de JQuery v1.7.1 dans ma page, cela a finalement fonctionné. Donc, dans mon cas, c'était la version de JQuery qui était à l'origine du problème.

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
MacGyver

Utiliser $("textarea#ExampleMessage").html('whatever you want to put here'); peut être un bon moyen, car .val() peut avoir des problèmes lorsque vous utilisez des données de la base de données.

Par exemple:

Un champ de base de données nommé description a la valeur suivante asjkdfklasdjf sjklñadf. Dans ce cas, utiliser .val () pour attribuer une valeur à textarea peut s’avérer fastidieux.

0
user306265

Utilisez simplement ce code et vous aurez toujours la valeur:

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

Donc, il va vérifier val () et définir sa valeur. Si val () obtient une chaîne vide, NULL, NaN o.s. il va vérifier pour html () puis pour text () ...

0
Simon

Je pense qu'il manque un aspect important:

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

ne fonctionne que s'il existe un sélecteur d'identifiant (#)

pour le sélecteur de classe, il existe une option pour utiliser une valeur native telle que:

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

Cela marche:

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

Rappelez-vous que la partie délicate ici consiste à vous assurer que vous utilisez le bon identifiant. Et avant d'utiliser l'identifiant, assurez-vous de mettre # devant.

0
ADL