Ustaw wartość textarea w jQuery

525

Próbuję ustawić wartość w polu textarea za pomocą jquery z następującym kodem:

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

Problem polega na tym, że po uruchomieniu tego kodu nie zmienia on tekstu w obszarze tekstowym?

Jednak podczas wykonywania alert($("textarea#ExampleMessage").attr("value"))nowo ustawiona wartość jest zwracana?

GONeale
źródło
3
Jeśli magia jQuery nie działa, aby ustawić val () na <textarea>, a celujesz według identyfikatora, istnieje prawdopodobieństwo, że istnieje wiele elementów o tym samym identyfikatorze.
bilard

Odpowiedzi:

877

Próbowałeś val?

$("textarea#ExampleMessage").val(result.exampleMessage);
enobrev
źródło
5
głównie prawda, chociaż val zajmuje trochę czasu, aby upewnić się, że ustawiona wartość jest łańcuchem, a attr wydaje się generować nieco więcej magii.
enobrev
62
Tak. Obszar tekstowy nie ma atrybutu wartości, podczas gdy dane wejściowe mają.
MDCore,
14
Zgoda, ale val () ustawia to w tym przypadku. Oni [jquery] muszą ustalić, że jest to typ obszaru tekstowego i ustawić tekst.
GONeale,
17
Textarea ma właściwość value (JavaScript), podobnie jak wprowadzanie tekstu. To nie ma HTML valueatrybut, ale to nie ma znaczenia, ponieważ oba val()i attr('value')zapisu do wartości nieruchomości JavaScript. Uwaga, attr()nie nie ustawić atrybuty HTML! Ustawia tylko właściwości JavaScript, jednocześnie próbując ukryć różnicę dla przypadków takich jak class / className, gdzie nazwa jest inna. Ale nadal zobaczysz różnicę w miejscach, w których atrybut i właściwość robią różne rzeczy, na przykład w elementach formularza.
bobince
2
val(foo)działa dla mnie (jQuery 1.9.1). Użycie „ text(foo)gubi” do aktualizowania zawartości pola tekstowego powoduje utratę podziałów wierszy w IE, przy użyciu val(foo)zachowuje je.
Tim
77

Textarea nie ma atrybutu wartości, jego wartość znajduje się między znacznikami, tzn .: <textarea>my text</textarea>nie jest jak pole wejściowe ( <input value="my text" />). Dlatego attr nie działa :)

daniwalentyna
źródło
50

$("textarea#ExampleMessage").val() w jquery tylko magia.

Powinieneś zauważyć, że tag textarea używa wewnętrznego HTML do wyświetlania, a nie atrybutu wartości, tak jak tag wejściowy.

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

Powinieneś użyć

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

lub

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

zależy od tego, czy chcesz wyświetlić go jako tagi HTML czy zwykły tekst.

CallMeLaNN
źródło
1
Masz rację, textarea nie ma wartości ani wartości, a jquery po prostu robi magię, aby ułatwić życie deweloperowi.
Scott Kirkwood,
16
To się nie nazywa magia, to abstrakcja. textarea to tylko jedynki i zera, ale wszystkie warstwy abstrakcji na twoim komputerze ukrywają to dla ciebie. Można to podkreślić, ale proszę nie prosić o odrzucenie innych odpowiedzi z takiego powodu ... :)
Espen Herseth Halvorsen
8
beware - html () wykonuje tagi skryptów.
Lincoln B
3
Z jQuery API "Nie można używać metody .text () w formularzach wejściowych lub skryptach. Aby ustawić lub uzyskać wartość tekstową elementów wejściowych lub textarea, użyj metody .val (). Aby uzyskać wartość elementu skryptu, użyj metoda .html (). ”
pilot
20

Och, chodźcie chłopcy! działa tylko z

$('#your_textarea_id').val('some_value');
Mik
źródło
Tylko jeśli używasz selektora ID. Nie mogę, ponieważ mój kod jest generowany przez inną firmę
Jack
16

Myślę, że to powinno działać:

$("textarea#ExampleMessage").val(result.exampleMessage);
Jomit
źródło
10

miałem to samo pytanie, więc postanowiłem spróbować w obecnych przeglądarkach (jesteśmy półtora roku później po tym pytaniu) i to ( .val) działa

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

dla

  • IE8
  • FF 3.6
  • FF4
  • Opera 11
  • Chrome 10
Michel
źródło
1
Dla przypomnienia, jedną z wyjątkowych funkcjonalności jQuery jest zapewnienie zgodności z przeglądarkami, więc tak, jest całkiem prawdopodobne, że .val()wykona swoją magię w kilku przeglądarkach;)
diosney
9

Na Androidzie .vali .htmlnie działał.

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

wykonał robotę.

Dan Ochiana
źródło
1
Z jQuery API "Nie można używać metody .text () w formularzach wejściowych lub skryptach. Aby ustawić lub uzyskać wartość tekstową elementów wejściowych lub textarea, użyj metody .val (). Aby uzyskać wartość elementu skryptu, użyj metoda .html (). ”
pilot
8

Miałem ten sam problem i to rozwiązanie nie działało, ale działało użycie HTML

$('#your_textarea_id').html('some_value');
Dave
źródło
3
nie, html()działa tylko raz dla obszaru tekstowego, następnym razem chcesz dynamicznie zmienić treść textarea, html()nie będzie działać ...
Legionar
@ Legionar to jak sobie poradzić z tą sprawą?
Jawand Singh
cóż, ten pomógł mi stackoverflow.com/questions/1219860/... używając tych funkcji właśnie ustawiłem zakodowaną wartość w polu $('#textarea').val(encodedtext);
tekstowym
5

Jest problem: muszę wygenerować kod HTML z zawartości danego div. Następnie muszę umieścić ten surowy kod HTML w polu tekstowym. Kiedy używam funkcji $ (textarea) .val () w następujący sposób:

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

lub

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

Miałem problem z jakimś znakiem specjalnym (& „”), gdy są między cudzysłowami. Ale kiedy używam funkcji: $ (textarea) .html () tekst jest w porządku.

Jest przykładowy formularz:

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

Kod javascript / jquery, który nie działa, aby wypełnić obszar tekstowy, to:

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

Wreszcie rozwiązanie:

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

Sztuką jest owinięcie obszaru tekstowego znacznikiem span, aby pomóc w funkcji replaceWith. Nie jestem pewien, czy jest bardzo czysty, ale działa idealnie. Dodaj surowy kod HTML w polu tekstowym.

Mathieua
źródło
5

textarea nie przechowuje wartości jako

<textarea value="someString">

zamiast tego przechowuje wartości w tym formacie:

<textarea>someString</textarea>

Więc attr("value","someString")dostaje ten wynik:

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

spróbuj $("#textareaid").val()lub $("#textareaid").innerHTMLzamiast tego.

Luka Ramishvili
źródło
5

Obszar tekstowy nie ma wartości. jQuery .html () działa w tym przypadku

$("textarea#ExampleMessage").html(result.exampleMessage);
psoni
źródło
2
nie, html()działa tylko raz dla obszaru tekstowego, następnym razem chcesz dynamicznie zmienić treść textarea, html()nie będzie działać ...
Legionar
a jeśli zrobiłeś .empty (). html ('newContent') @Legionar?
VH
3

Działa dla mnie .... Zbudowałem ścianę książki do twarzy ...

Oto podstawa mojego kodu:

// SETS MY TEXT AREA TO EMPTY (NO VALUE)
$('textarea#message_wall').val('');
Edgar Villegas Alvarado
źródło
3

Aby ustawić wartość textarea zakodowanego HTML (wyświetlanego jako HTML), należy użyć .html( the_var ) ale jak wspomniano, jeśli spróbujesz ustawić go ponownie, może (i prawdopodobnie) nie zadziała.

Możesz to naprawić, opróżniając obszar tekstowy, .empty()a następnie ustawiając go ponownie za pomocą.html( the_var )

Oto działający 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
źródło
2

Próbowałem .val() .text() .html()i miałem kilka błędów przy użyciu jQuery do odczytu lub ustawienia wartości pola tekstowego ... w końcu używam natywnego js

$('#message').blur(function() {    
    if (this.value == '') { this.value = msg_greeting; }
});
Antony
źródło
2

Możemy użyć metod .val () lub .text () do ustawienia wartości. musimy wstawić wartość do val () jak val („hello”).

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

Sprawdź przykład tutaj: http://www.codegateway.com/2012/03/set-value-to-textarea-jquery.html

Avinash
źródło
2

Wystarczy użyć identyfikatora textarea według typu:

$("textarea#samplID").val()
S.Mohamed Mahdi Ahmadian zadeh
źródło
2

Myślę, że brakuje jednego ważnego aspektu:

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

działa tylko wtedy, gdy istnieje selektor identyfikatora (#)

dla selektora klasy istnieje opcja użycia wartości natywnej, takiej jak:

$('.some-text-area')[0].value = 'test';
użytkownik 2846569
źródło
1

Przyjęta odpowiedź działa dla mnie, ale dopiero wtedy, gdy zdałem sobie sprawę, że muszę wykonać kod po zakończeniu ładowania strony. W tej sytuacji skrypt wbudowany nie działał, ponieważ #my_form jeszcze się nie załadował.

$(document).ready(function() {
  $("#my_form textarea").val('');
});
pdub23
źródło
pdub23, zawsze lepiej skomentować zaakceptowaną odpowiedź niż stworzyć nową odpowiedź…
Fábio Batista
1

Możesz nawet użyć poniższego fragmentu.

$("textarea#ExampleMessage").append(result.exampleMessage);
shyamshyre
źródło
1

Kiedy miałem JQuery v1.4.4 na stronie, żadne z nich nie działało. Po wstrzyknięciu JQuery v1.7.1 na moją stronę, działało w końcu. W moim przypadku przyczyną była moja wersja 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');
MacGyver
źródło
1

Wykorzystałem $(textarea).val/html/text(any_str_var)wszystko, co dla mnie działa. Jeśli chcesz mieć pewność, że twoja zmienna jako ciąg znaków zostanie dodana do obszaru tekstowego, zawsze możesz konkatować w następujący sposób:

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

Metoda .val () jest zdecydowanie używana w obszarze tekstowym - patrz: https://api.jquery.com/val/

.html () może być użyty do pobrania lub ustawienia zawartości dowolnego elementu - patrz: https://api.jquery.com/html/#html2

.text () jest taki sam jak .html, ale można go użyć do ustawienia zawartości XML: patrz - https://api.jquery.com/text/#text-text

Możesz także przeczytać więcej o tym, jak każdy z nich działa na znaki specjalne z każdym z tych łączy.

Paul McCormack
źródło
0

Wystarczy użyć tego kodu, a zawsze będziesz mieć wartość:

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

Więc sprawdzi val () i ustawi jego wartość. Jeśli val () otrzyma pusty ciąg, NULL, NaN os sprawdzi html (), a następnie text () ...

Szymon
źródło
0

To działa:

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

Pamiętaj, że trudną częścią jest upewnienie się, że używasz prawidłowego identyfikatora. Zanim użyjesz identyfikatora, upewnij się, że umieściłeś #go przed nim.

ADL
źródło
0

Korzystanie $("textarea#ExampleMessage").html('whatever you want to put here');może być dobrym sposobem, ponieważ .val()może mieć problemy podczas korzystania z danych z bazy danych.

Na przykład:

Pole bazy danych o nazwie as descriptionma następującą wartość asjkdfklasdjf sjklñadf. W takim przypadku użycie .val () do przypisania wartości do pola tekstowego może być żmudnym zadaniem.

użytkownik306265
źródło
0

Próbowałem ustawić wartość / tekst / HTML za pomocą JQuery, ale nie powiodło się. Więc wypróbowałem następujące.

W tym przypadku wstrzykiwałem nowy element textarea do utworzonego DOM.

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

wprowadź opis zdjęcia tutaj

Peck_kon
źródło