JQuery में textarea का मान सेट करें


525

मैं निम्नलिखित कोड के साथ jquery का उपयोग करके एक textarea क्षेत्र में एक मूल्य निर्धारित करने का प्रयास कर रहा हूं:

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

मुद्दा यह है कि एक बार यह कोड निष्पादित हो जाने के बाद, यह टेक्स्टारिया में पाठ को बदल नहीं रहा है?

हालांकि जब एक alert($("textarea#ExampleMessage").attr("value"))नया सेट मान प्रदर्शन किया जाता है?


3
यदि jQuery का जादू <textarea> पर वैल () सेट करने के लिए काम नहीं कर रहा है, और आप आईडी द्वारा लक्षित कर रहे हैं, तो संभावना है कि एक ही आईडी के साथ कई तत्व हैं।
बिल्रिकार्ड्स

जवाबों:


877

क्या आपने घाटी की कोशिश की है?

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

5
ज्यादातर सच है, हालांकि वैल यह सुनिश्चित करने के लिए समय लेता है कि आप जो मूल्य निर्धारित कर रहे हैं वह एक स्ट्रिंग है, और एटर कुल मिलाकर थोड़ा अधिक जादू करता है।
एनोब्रेव

62
हाँ। एक textarea एक मूल्य विशेषता नहीं है, जबकि एक इनपुट करता है।
MDCore

14
सहमत, लेकिन वैल () इसे इस उदाहरण में सेट कर रहा है। उन्हें [jquery] यह निर्धारित करना चाहिए कि यह textarea प्रकार है और पाठ सेट करें।
गोनेले

17
textarea में एक पाठ इनपुट की तरह एक मूल्य (जावास्क्रिप्ट) संपत्ति है। इसमें HTML valueविशेषता नहीं है , लेकिन इससे कोई फर्क नहीं पड़ता, क्योंकि दोनों val()और attr('value')JavaScript मान संपत्ति में लिखते हैं। ध्यान दें, HTML विशेषताएँ सेट नहींattr() करता है ! यह केवल जावास्क्रिप्ट गुण सेट करता है, जबकि वर्ग / वर्गनाम जैसे मामलों के अंतर को छिपाने की कोशिश करता है जहां नाम अलग है। लेकिन आप अभी भी उन स्थानों के लिए अंतर देखेंगे जहां गुण और संपत्ति अलग-अलग चीजें करते हैं, जैसे कि फार्म तत्व।
बॉब

2
val(foo)मेरे लिए काम करता है (jQuery 1.9.1)। का उपयोग करते हुए text(foo)खो देता है पाठ क्षेत्र सामग्री अद्यतन करने के लिए IE पर लाइनब्रेक खो देता है, का उपयोग करते हुए val(foo)बरकरार रखता है उन्हें।
टिम

77

टेक्सारिया की कोई मूल्य विशेषता नहीं है, इसका मूल्य टैग के बीच आता है, अर्थात: <textarea>my text</textarea>यह इनपुट फ़ील्ड ( <input value="my text" />) की तरह नहीं है । यही कारण है कि attr काम नहीं करता है :)


50

$("textarea#ExampleMessage").val() jquery में सिर्फ एक जादू।

आपको यह देखना चाहिए कि textarea टैग इनर html का उपयोग करके प्रदर्शित करना है और इनपुट टैग की तरह मूल्य विशेषता में नहीं है

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

आपको उपयोग करना चाहिए

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

या

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

इस पर निर्भर करें कि क्या आप इसे html टैग या सादे पाठ के रूप में प्रदर्शित करना चाहते हैं।


1
आप सही हैं, textarea doens't एक वैल या वैल्यू नहीं है, और jquery सिर्फ डेवलपर के लिए जीवन को आसान बनाने के लिए कुछ जादू कर रही है।
स्कॉट किर्कवुड

16
इसे जादू नहीं कहा जाता, इसे अमूर्तन कहा जाता है। textarea केवल 1 है और 0 है, लेकिन आपके कंप्यूटर में अमूर्त की सभी परतें आपके लिए छुपाती हैं। इसे इंगित करना ठीक है, लेकिन कृपया ऐसे कारणों से लोगों को अन्य उत्तरों को कम करने के लिए न कहें ... :)
एस्पेन हेर्सेथ हैलवोरसेन

8
beware - html () स्क्रिप्ट टैग निष्पादित करता है।
लिंकन बी

3
से jQuery एपीआई ".text () विधि फ़ॉर्म इनपुट या स्क्रिप्ट पर इस्तेमाल नहीं किया जा सकता। सेट या इनपुट या पाठ क्षेत्र तत्वों का पाठ मान पाने के लिए, .val () विधि का उपयोग करें। एक स्क्रिप्ट तत्व, उपयोग की मूल्य प्राप्त करने के लिए .html () विधि। "
पायलट

20

ओहो आओ लड़कों! यह सिर्फ साथ काम करता है

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

यदि आप एक आईडी चयनकर्ता का उपयोग करते हैं। मैं नहीं कर सकता क्योंकि मेरा तृतीय-पक्ष उत्पन्न कोड है
जैक

16

मुझे लगता है कि यह काम करना चाहिए:

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

10

मेरे पास एक ही सवाल था इसलिए मैंने इसे वर्तमान ब्राउज़रों में आज़माने का फैसला किया (हम इस प्रश्न के बाद डेढ़ साल बाद के समय में हैं), और यह ( .val) काम करता है

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

के लिये

  • IE8
  • एफएफ 3.6
  • FF4
  • ओपेरा 11
  • क्रोम 10

1
रिकॉर्ड के लिए, एक असाधारण jQuery कार्यशीलता ब्राउज़र अनुकूलता प्रदान करने में से एक है, इसलिए हाँ, यह बहुत संभावना है कि .val()यह कई ब्राउज़रों में अपना जादू करेगा;)
डायोसनी

9

Android पर .valऔर .htmlकाम नहीं किया।

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

काम किया।


1
से jQuery एपीआई ".text () विधि फ़ॉर्म इनपुट या स्क्रिप्ट पर इस्तेमाल नहीं किया जा सकता। सेट या इनपुट या पाठ क्षेत्र तत्वों का पाठ मान पाने के लिए, .val () विधि का उपयोग करें। एक स्क्रिप्ट तत्व, उपयोग की मूल्य प्राप्त करने के लिए .html () विधि। "
पायलट

8

मेरे पास एक ही मुद्दा था और यह समाधान काम नहीं करता था लेकिन HTML का उपयोग करने के लिए क्या काम किया गया था

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

3
नहीं, html()केवल एक बार textarea के अनुसार काम कर रहा है, अगली बार, आप गतिशील रूप से सामग्री बदलना चाहते हैं textarea, html()काम नहीं करेगा ...
Legionar

@Legionar तो इस मामले को कैसे संभालना है?
जवंद सिंह

ठीक है, इसने मेरी मदद की stackoverflow.com/questions/1219860/… इन कार्यों का उपयोग करके मैंने केवल textarea में एन्कोडेड मान का उपयोग करके सेट किया$('#textarea').val(encodedtext);
Jawand Singh

5

वहाँ समस्या है: मैं एक दिए गए div के होते से html कोड उत्पन्न करने की जरूरत है। फिर, मुझे इस कच्चे HTML कोड को एक टेक्स्टारिया में डालना होगा। जब मैं फ़ंक्शन $ (textarea) .val () का उपयोग इस तरह करता हूं:

$ (textarea) .val ("कुछ html जैसे <इनपुट प्रकार = 'पाठ' मान = 'शैली =" पृष्ठभूमि: url (' http://www.w.com/bg.gif ') रिपीट-एक्स केंद्र; "/> bla bla");

या

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

जब वे उद्धरण के बीच होते हैं तो मुझे कुछ विशेष चरित्र (& '') के साथ समस्या होती है। लेकिन जब मैं फ़ंक्शन का उपयोग करता हूं: $ (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>

और जावास्क्रिप्ट / jquery कोड जो textarea को भरने के लिए काम नहीं करता है वह है:

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

अंतिम समाधान:

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

ट्रिक आपके टेक्स्टरी को स्पैन टैग के साथ रिप्लेसविथ फंक्शन की मदद से लपेटता है। मुझे यकीन नहीं है कि यह बहुत साफ है, लेकिन यह सही काम है एक 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()केवल एक बार textarea के अनुसार काम कर रहा है, अगली बार, आप गतिशील रूप से सामग्री बदलना चाहते हैं textarea, html()काम नहीं करेगा ...
Legionar

और अगर आपने .empty ()। html ('newContent') @Legionar?
वीएच


3

एन्कोडेड एचटीएमएल (एचटीएमएल के रूप में दिखाने के लिए) का टेक्स्टएआरए मूल्य निर्धारित करने के लिए आपको उपयोग करना चाहिए .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

हम या तो .val () या .text () मान सेट करने के तरीकों का उपयोग कर सकते हैं। हमें वैल के अंदर वैल्यू लगाने की जरूरत है (जैसे वैल ("हैलो")।

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

यहां उदाहरण देखें: http://www.codegateway.com/2012/03/set-value-to-textarea-jquery.html



2

मुझे लगता है कि एक महत्वपूर्ण पहलू याद आ रहा है:

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

आईडी चयनकर्ता (#) होने पर ही काम करता है

कक्षा चयनकर्ता के लिए देशी मूल्य का उपयोग करने का एक विकल्प है:

$('.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 संस्करण था जो इस समस्या का कारण बन रहा था।

आईडी ==> टेक्स्टारिड

======================

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 + '')

.valar () विधि निश्चित रूप से 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 () को एक खाली स्ट्रिंग, NULL, NaN os मिलता है, तो वह html () और फिर टेक्स्ट () ... के लिए जाँच करेगा।


0

यह काम:

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

याद रखें, यहाँ मुश्किल हिस्सा यह सुनिश्चित कर रहा है कि आप सही आईडी का उपयोग करें। और इससे पहले कि आप आईडी का उपयोग करें, सुनिश्चित करें कि आपने इसे #पहले रखा था।


0

उपयोग करना $("textarea#ExampleMessage").html('whatever you want to put here');एक अच्छा तरीका हो सकता है, क्योंकि .val()जब आप डेटाबेस से डेटा का उपयोग कर रहे हैं तो समस्याएं हो सकती हैं।

उदाहरण के लिए:

एक डेटाबेस फ़ील्ड जिसका नाम descriptionनिम्न मान है asjkdfklasdjf sjklñadf। इस मामले में .val का उपयोग करने के लिए .val () का उपयोग करना एक थकाऊ काम हो सकता है।


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

यहाँ छवि विवरण दर्ज करें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.