Legen Sie den Wert des Textbereichs in jQuery fest

525

Ich versuche, einen Wert in einem Textfeld mit jquery mit dem folgenden Code festzulegen:

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

Das Problem ist, dass dieser Code nach seiner Ausführung den Text im Textbereich nicht ändert.

Bei der Ausführung eines wird jedoch alert($("textarea#ExampleMessage").attr("value"))der neu eingestellte Wert zurückgegeben?

GONeale
quelle
3
Wenn die jQuery-Magie nicht funktioniert, um val () für <Textbereich> festzulegen, und Sie nach ID zielen, gibt es wahrscheinlich mehrere Elemente mit derselben ID.
Billrichards

Antworten:

877

Hast du es mit val versucht?

$("textarea#ExampleMessage").val(result.exampleMessage);
enobrev
quelle
5
Meistens wahr, obwohl val die Zeit braucht, um sicherzustellen, dass der von Ihnen eingestellte Wert eine Zeichenfolge ist, und attr insgesamt etwas magischer zu wirken scheint.
Enobrev
62
Ja. Ein Textbereich hat kein Wertattribut, während eine Eingabe dies tut.
MDCore
14
Einverstanden, aber val () setzt es in diesem Fall. Sie [jquery] müssen den Textbereichstyp bestimmen und den Text festlegen.
GONeale
17
textarea hat genau wie eine Texteingabe eine Werteigenschaft (JavaScript). Es hat kein HTML- valueAttribut, aber das spielt keine Rolle, da beide val()und attr('value')in die JavaScript-Werteigenschaft schreiben. Hinweis, attr()setzt keine HTML-Attribute! Es werden nur JavaScript-Eigenschaften festgelegt, während versucht wird, den Unterschied für Fälle wie class / className zu verbergen, in denen der Name unterschiedlich ist. Sie werden jedoch immer noch den Unterschied für Orte sehen, an denen das Attribut und die Eigenschaft unterschiedliche Aufgaben ausführen, z. B. in Formularelementen.
Bobince
2
val(foo)funktioniert bei mir (jQuery 1.9.1). Wenn Sie text(foo)zum Aktualisieren von Textbereichsinhalten Verluste verwenden, gehen die Zeilenumbrüche im IE verloren, wenn Sie sie val(foo)beibehalten.
Tim
77

Textarea hat kein Wertattribut, sein Wert kommt zwischen Tags, dh: <textarea>my text</textarea>es ist nicht wie das Eingabefeld ( <input value="my text" />). Deshalb funktioniert attr nicht :)

Danivalentin
quelle
50

$("textarea#ExampleMessage").val() in jquery nur eine Magie.

Sie sollten beachten, dass das Textarea- Tag zum Anzeigen inneres HTML verwendet und nicht wie das Eingabe-Tag im Wertattribut.

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

Du solltest benutzen

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

oder

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

hängt davon ab, ob Sie es als HTML-Tags oder als einfachen Text anzeigen möchten.

CallMeLaNN
quelle
1
Sie haben Recht, Textbereich hat keinen Wert oder Wert, und jquery macht nur etwas Magie, um dem Entwickler das Leben zu erleichtern.
Scott Kirkwood
16
Es heißt nicht Magie, es heißt Abstraktion. Der Textbereich besteht nur aus Einsen und Nullen, aber alle Abstraktionsebenen in Ihrem Computer verbergen dies für Sie. Es ist in Ordnung, darauf hinzuweisen, aber bitte bitten Sie die Leute nicht, andere Antworten aus einem solchen Grund abzulehnen ... :)
Espen Herseth Halvorsen
8
Vorsicht - html () führt Skript-Tags aus.
Lincoln B
3
Von der jQuery-API "Die .text () -Methode kann nicht für Formulareingaben oder Skripte verwendet werden. Verwenden Sie zum Festlegen oder Abrufen des Textwerts von Eingabe- oder Textbereichselementen die .val () -Methode. Verwenden Sie zum Abrufen des Werts eines Skriptelements die Methode .val () die .html () -Methode. "
Pilot
20

Oohh komm schon Jungs! es funktioniert nur mit

$('#your_textarea_id').val('some_value');
Mik
quelle
Nur wenn Sie einen ID-Selektor verwenden. Ich kann nicht, da mein Code von Drittanbietern generiert wurde
Jack
16

Ich denke das sollte funktionieren:

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

Ich hatte die gleiche Frage, also habe ich beschlossen, sie in den aktuellen Browsern zu versuchen (wir sind eineinhalb Jahre später nach dieser Frage), und dies ( .val) funktioniert

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

zum

  • IE8
  • FF 3.6
  • FF4
  • Oper 11
  • Chrome 10
Michel
quelle
1
Für die Aufzeichnung ist eine der außergewöhnlichen jQuery-Funktionen die Bereitstellung von Browserkompatibilität, also ja, es ist ziemlich wahrscheinlich, dass .val()dies in mehreren Browsern seine Magie
entfalten wird
9

Auf Android .valund .htmlhat nicht funktioniert.

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

hat den Job gemacht.

Dan Ochiana
quelle
1
Von der jQuery-API "Die .text () -Methode kann nicht für Formulareingaben oder Skripte verwendet werden. Verwenden Sie zum Festlegen oder Abrufen des Textwerts von Eingabe- oder Textbereichselementen die .val () -Methode. Verwenden Sie zum Abrufen des Werts eines Skriptelements die Methode .val () die .html () -Methode. "
Pilot
8

Ich hatte das gleiche Problem und diese Lösung funktionierte nicht, aber was funktionierte, war die Verwendung von HTML

$('#your_textarea_id').html('some_value');
Dave
quelle
3
Nein, html()funktioniert nur einmal pro Textbereich, das nächste Mal möchten Sie den Inhalt dynamisch ändern textarea, html()wird nicht funktionieren ...
Legionar
@Legionar wie geht man dann mit diesem Fall um?
Jawand Singh
Nun , dieser hat mir geholfen, stackoverflow.com/questions/1219860/… mit diesen Funktionen zu verwenden. Ich habe gerade den codierten Wert im Textbereich mit$('#textarea').val(encodedtext);
Jawand Singh
5

Dort das Problem: Ich muss HTML-Code aus dem Inhalt eines bestimmten Div generieren. Dann muss ich diesen rohen HTML-Code in einen Textbereich einfügen. Wenn ich die Funktion $ (textarea) .val () wie folgt benutze:

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

oder

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

Ich hatte ein Problem mit einem Sonderzeichen (& '"), wenn es zwischen Anführungszeichen liegt. Wenn ich jedoch die Funktion $ (textarea) .html () verwende, ist der Text in Ordnung.

Es gibt ein Beispielformular:

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

Und Javascript / JQuery-Code, der nicht funktioniert, um den Textbereich zu füllen, ist:

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

Endlich die Lösung:

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

Der Trick besteht darin, Ihren Textbereich mit einem span-Tag zu versehen, um die Funktion replaceWith zu unterstützen. Ich bin mir nicht sicher, ob es sehr sauber ist, aber es funktioniert auch perfekt. Fügen Sie rohen HTML-Code in einen Textbereich ein.

Mathieua
quelle
5

textarea speichert keine Werte als

<textarea value="someString">

Stattdessen werden Werte in diesem Format gespeichert:

<textarea>someString</textarea>

So erhalten attr("value","someString")Sie dieses Ergebnis:

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

versuchen Sie es $("#textareaid").val()oder $("#textareaid").innerHTMLstattdessen.

Luka Ramishvili
quelle
5

Textbereich hat keinen Wert. jQuery .html () funktioniert in diesem Fall

$("textarea#ExampleMessage").html(result.exampleMessage);
psoni
quelle
2
Nein, html()funktioniert nur einmal pro Textbereich, das nächste Mal möchten Sie den Inhalt dynamisch ändern textarea, html()wird nicht funktionieren ...
Legionar
und wenn Sie .empty (). html ('newContent') @Legionar?
VH
3

Es funktioniert für mich ... Ich habe eine Facebook-Wand gebaut ...

Hier ist die Basis meines Codes:

// SETS MY TEXT AREA TO EMPTY (NO VALUE)
$('textarea#message_wall').val('');
Edgar Villegas Alvarado
quelle
3

Um den Textbereichswert von codiertem HTML festzulegen (als HTML anzuzeigen), sollten Sie verwenden .html( the_var ) Wie bereits erwähnt, funktioniert er möglicherweise (und wahrscheinlich) nicht, wenn Sie versuchen, ihn erneut festzulegen.

Sie können dies beheben, indem Sie den Textbereich leeren .empty()und dann mit erneut einstellen.html( the_var )

Hier ist eine funktionierende 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>

sMyles
quelle
2

Ich habe es mit versucht .val() .text() .html()und hatte einige Fehler mit jQuery, um den Wert eines Textbereichs zu lesen oder festzulegen ... am Ende verwende ich native js

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

Wir können entweder die Methoden .val () oder .text () verwenden, um Werte festzulegen. Wir müssen Wert in val () wie val ("Hallo") setzen.

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

Überprüfen Sie das Beispiel hier: http://www.codegateway.com/2012/03/set-value-to-textarea-jquery.html

Avinash
quelle
2

Verwenden Sie einfach die Textarea-ID nach Typ wie folgt:

$("textarea#samplID").val()
S.Mohamed Mahdi Ahmadian Zadeh
quelle
2

Ich denke, es fehlt ein wichtiger Aspekt:

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

funktioniert nur, wenn ein ID-Selektor (#) vorhanden ist

Für die Klassenauswahl gibt es eine Option zur Verwendung eines nativen Werts wie:

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

Die akzeptierte Antwort funktioniert für mich, aber erst nachdem mir klar wurde, dass ich meinen Code ausführen musste, nachdem die Seite vollständig geladen wurde. In dieser Situation hat das Inline-Skript nicht funktioniert, da #my_form noch nicht geladen wurde.

$(document).ready(function() {
  $("#my_form textarea").val('');
});
pdub23
quelle
pdub23, es ist immer besser, die akzeptierte Antwort zu kommentieren, als eine neue Antwort zu erstellen ...
Fábio Batista
1

Sie können sogar das folgende Snippet verwenden.

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

Als ich JQuery v1.4.4 auf der Seite hatte, funktionierte keines davon. Beim Einfügen von JQuery v1.7.1 in meine Seite hat es endlich funktioniert. In meinem Fall war es also meine JQuery-Version, die das Problem verursachte.

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');
MacGyver
quelle
1

Ich habe $(textarea).val/html/text(any_str_var)alles für mich gearbeitet. Wenn Sie sicher sein möchten, dass Ihre Variable als Zeichenfolge zum Textbereich hinzugefügt wird, können Sie sich jederzeit wie folgt konzentrieren:

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

Die Methode .val () wird definitiv im Textbereich verwendet - siehe: https://api.jquery.com/val/

Mit .html () können Sie den Inhalt eines Elements abrufen oder festlegen - siehe: https://api.jquery.com/html/#html2

.text () ist dasselbe wie .html, außer dass dies zum Festlegen von XML-Inhalten verwendet werden kann: siehe - https://api.jquery.com/text/#text-text

Sie können auch mehr darüber lesen, wie sich die einzelnen Zeichen auf Sonderzeichen mit jedem dieser Links auswirken.

Paul McCormack
quelle
0

Verwenden Sie einfach diesen Code und Sie haben immer den Wert:

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

Also prüft es val () und setzt seinen Wert. Wenn val () eine leere Zeichenfolge, NULL, NaN os, erhält, wird nach HTML () und dann nach Text () gesucht ...

Simon
quelle
0

Das funktioniert:

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

Denken Sie daran, dass der schwierige Teil hier darin besteht, sicherzustellen, dass Sie die richtige ID verwenden. Und bevor Sie die ID verwenden, stellen Sie sicher, dass Sie sie #vorlegen.

ADL
quelle
0

Die Verwendung $("textarea#ExampleMessage").html('whatever you want to put here');kann ein guter Weg sein, da .val()es Probleme geben kann, wenn Sie Daten aus der Datenbank verwenden.

Zum Beispiel:

Ein Datenbankfeld mit dem Namen as descriptionhat den folgenden Wert asjkdfklasdjf sjklñadf. In diesem Fall kann die Verwendung von .val () zum Zuweisen von Werten zum Textbereich eine mühsame Aufgabe sein.

user306265
quelle
0

Ich habe versucht, value / text / html mit JQuery festzulegen, war aber nicht erfolgreich. Also habe ich folgendes versucht.

In diesem Fall habe ich ein neues Textbereichselement in ein nach erstelltes DOM eingefügt.

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

Geben Sie hier die Bildbeschreibung ein

Peck_conyon
quelle