इनपुट क्षेत्र में पाठ जोड़ें

108

मुझे कुछ पाठ इनपुट क्षेत्र में संलग्न करने की आवश्यकता है ...

jquery text append

3

के संभावित डुप्लिकेट यह संभव है JQuery में ".Value + =" करना है?

— पैट्रिक मैकेलेनै जूल

203

    $('#input-field-id').val($('#input-field-id').val() + 'more text');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="input-field-id" />

स्निपेट का विस्तार करें

— अयमान हुरीह
स्रोत

5

कृपया इस सवाल पर मेरा जवाब पढ़ें - वास्तव में $('#input-field-id')दो बार कॉल करने का कोई कारण नहीं है ... बहुत ही सरल उत्तर हालांकि - +1

— gnnf

2

मुझे ऐसा लगता है कि एक फ़ंक्शन होना चाहिए जो इनपुट के मूल्य में जोड़ता है जैसे आप कर सकते हैं innerHTML।

— ब्लू भेड़

109

दो विकल्प हैं। अयमान का दृष्टिकोण सबसे सरल है, लेकिन मैं इसमें एक अतिरिक्त नोट जोड़ूंगा। आपको वास्तव में jQuery चयन कैश करना चाहिए, $("#input-field-id")दो बार कॉल करने का कोई कारण नहीं है :

var input = $( "#input-field-id" );
input.val( input.val() + "more text" );

अन्य विकल्प, .val()एक फ़ंक्शन को एक तर्क के रूप में भी ले सकते हैं। यह आसानी से कई आदानों पर काम कर के Argentange है:

$( "input" ).val( function( index, val ) {
    return val + "more text";
});

— gnarf
स्रोत

2

'अन्य विकल्प' को पसंद करना - एफपी का अच्छा सा हिस्सा।

— लाहेर

17

यदि आप एक बार और अधिक प्रयोग करने की योजना बना रहे हैं, तो आप एक फ़ंक्शन लिखना चाहते हैं:

//Append text to input element
function jQ_append(id_of_input, text){
    var input_id = '#'+id_of_input;
    $(input_id).val($(input_id).val() + text);
}

आप इसे कॉल कर सकते हैं:

jQ_append('my_input_id', 'add this text');

— Margus
स्रोत

मैं प्लेसहोल्डर को एक खोज बॉक्स में नहीं जोड़ सकता हूं और इसका उपयोग करना चाहूंगा और फिर उपयोगकर्ता द्वारा खोज बॉक्स में कर्सर डालने पर बॉक्स को साफ करना होगा। क्या यह योग्य है?

— केविन डब्ल्यू।

5

आप शायद वैल () के लिए देख रहे हैं

— kgiannakakis
स्रोत

4

	// Define appendVal by extending JQuery
	$.fn.appendVal = function( TextToAppend ) {
		return $(this).val(
			$(this).val() + TextToAppend
		);
	};
//_____________________________________________

	// And that's how to use it:
	$('#SomeID')
		.appendVal( 'This text was just added' )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<textarea 
          id    =  "SomeID"
          value =  "ValueText"
          type  =  "text"
>Current NodeText
</textarea>
  </form>

स्निपेट का विस्तार करें

खैर इस उदाहरण को बनाते समय मैं किसी तरह थोड़ा भ्रमित हो गया। " ValueText " बनाम> वर्तमान NodeText < मान विशेषता .val()के डेटा पर चलने वाला नहीं है ? वैसे भी मैं और आप मुझे जल्दी या बाद में साफ कर सकते हैं।

हालाँकि अब के लिए बिंदु यह है:

जब फॉर्म डेटा उपयोग के साथ काम कर रहे हैं । () ।

जब ज्यादातर के साथ काम केवल पढ़ने के लिए डेटा टैग के इस्तेमाल के बीच में .text () या .append () टेक्स्ट संलग्न करने के लिए।

— तमिलनाडु
स्रोत

1

क्या इससे सवाल का बेहतर जवाब देने के लिए कुछ नया होता है? मैं समझता हूं कि आप सिर्फ विस्तार कर रहे हैं, लेकिन इसका उत्तर कुछ समय के लिए दिया गया है। बस यह सुनिश्चित करना चाहते हैं कि एसओ की गुणवत्ता बरकरार है।

— केविन ब्राउन

1

देखभाल के लिए धन्यवाद - मुझे यह पसंद है। लेकिन हाँ तुम सही हो वहाँ बहुत नया नहीं है सार वही रहता है। हालाँकि जब मैं वर्तमान उत्तरों को पचाता हूँ तो मुझे लगा कि शैली और क्रियान्वयन के बारे में कुछ किया जा सकता है। मैंने पहली बार जाँच की कि क्या कुछ पोस्ट को संपादित किया जा सकता है, लेकिन अंत में मैंने सोचा कि एक नया बनाना सबसे अच्छा है। तो नया क्या है: * आप स्निप को चला सकते हैं। * विस्तार से स्व-दस्तावेजीकरण कोड लिखने के तरीके पर बहुत मदद मिलती है, जबकि बहुत सार नहीं है।

— नाडु

0

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style type="text/css">
        *{
            font-family: arial;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <button id="more">More</button><br/><br/>
    <div>
        User Name : <input type="text" class="users"/><br/><br/>
    </div>
    <button id="btn_data">Send Data</button>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('#more').on('click',function(x){
                var textMore = "User Name : <input type='text' class='users'/><br/><br/>";
                $("div").append(textMore);
            });

            $('#btn_data').on('click',function(x){
                var users=$(".users");
                $(users).each(function(i, e) {
                    console.log($(e).val());
                });
            })
        });
    </script>
</body>
</html>

उत्पादन

— राम पुकार
स्रोत