एक इनपुट फ़ील्ड का मान सेट करें


443

आप <input>जावास्क्रिप्ट में फ़ॉर्म टेक्स्ट फ़ील्ड का डिफ़ॉल्ट मान कैसे सेट करेंगे ?

जवाबों:


819

यह करने का एक तरीका है:

document.getElementById("mytext").value = "My value";

6
यदि उपयोगकर्ता फ़ील्ड पर क्लिक करता है, तो क्या मैं Vale NULL बनाने का कोई तरीका है?
सेबेस्टियनऑपरमैन

4
हां, एक ईवेंट हैंडलर को इनपुट फ़ील्ड पर असाइन करें जो वैल्यू ऑनक्लिक को मिटा देता है। उदाहरण: elem.onclick = clearField (); // जो ऐसे फ़ंक्शन को इंगित करता है जो ऊपर दिए गए उत्तर के समान कुछ भी नहीं करने के लिए मान सेट करके फ़ील्ड को मिटा देता है।
जेम्स

1
मेरे लिए यह काम नहीं किया। क्या उपरोक्त मूल्य विशेषता का निर्माण करेगा?
दक्रिस

2
यदि आप इनपुट-टैग के लिए मान बदलने का प्रयास कर रहे हैं तो यह काम नहीं करता है। स्पष्ट करने के लिए, यदि मेरे पास एक बटन है जिसे क्लिक करने पर उसका मूल्य बदलना चाहिए, तो मैं इसे बदलने में सक्षम नहीं लगता, न तो "this.parentNode.getElementByTagName ('इनपुट')। style_isplay = 'कोई नहीं। '; " न ही इस का उपयोग करके। शैली .isplay = 'कोई नहीं'; साथ ही, मैंने ".स्टाइल = प्रदर्शन: कोई नहीं;"; कोई सफलता के साथ ...
MahNas92

7
यह और ऊपर दिए गए प्रश्न के अन्य उत्तर इस बात को नजरअंदाज करते हैं कि डिफ़ॉल्ट मूल्य को बदल दिया जाएगा। उपयोग करने से .value = ...केवल वर्तमान मूल्य बदल जाता है। फॉर्म ( <input type="reset" />उदाहरण के साथ ) को रीसेट करने से मान वापस मूल में बदल जाएगा। इसके विपरीत, setAttribute("value", ...)फ़ायरफ़ॉक्स और क्रोम में ठीक से काम करता है। डिफ़ॉल्ट मान बदल जाता है लेकिन वास्तविक मूल्य केवल तभी बदला जाता है जब उपयोगकर्ता ने इसे पहले से संशोधित नहीं किया हो। हालांकि, setAttributeब्राउज़र संगतता के कारण अनुशंसित नहीं है। क्या कोई और संभावना है?
जोजोतएक्सजीएमई

55

यदि आपके फॉर्म में इनपुट फ़ील्ड है जैसे

<input type='text' id='id1' />

तो आप जावास्क्रिप्ट में कोड लिख सकते हैं जैसा कि इसके मूल्य को निर्धारित करने के लिए नीचे दिया गया है

document.getElementById('id1').value='text to be displayed' ; 

52

मैं 'setAttribute' फ़ंक्शन का उपयोग करता हूं:

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
  document.getElementById("example").setAttribute('value','My default value');
</script>

19
valueडॉट नोटेशन का उपयोग करके सीधे एक्सेस किया जाना चाहिए: developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute आप केवल मूल मूल्य से निपटने के लिए सेट / getAttribute का उपयोग करते हैं। DOM लोड होने के बाद, .valueतत्व के वास्तविक कार्य मान का प्रतिनिधित्व करता है।
क्रिस बेकर

4
अगर मैं कर सकता तो @ChrisBaker मैं यह जवाब देना चाहता था। मेरे पास एक 3 पार्टी ऐप है जो एप्लिकेशन को स्वचालित करने के लिए इनपुट फ़ील्ड्स को स्कैन करता है (मेरा पेज एक एम्बेडेड अर्थात कंट्रोल में रेंडर करता है)। यह एक अनूठा परिदृश्य है जहां इनपुट फ़ील्ड ग्राहक के ऐप द्वारा खपत की जाती हैं। मेरे दस्तावेज़ तैयार फ़ंक्शन में .value का उपयोग करने के तुरंत बाद इनपुट फ़ील्ड रीसेट नहीं किए गए थे। जब मेरे पास बाद में async पोस्टबैक होता था तो उपयोगकर्ता आरंभ कर देता था, यह इन इनपुट मानों का पुन: उपयोग करेगा ताकि वे पहले से क्लिक की गई कुछ चीजों को स्वचालित कर सकें और मुझे "उन्हें भूलना" पृष्ठ की आवश्यकता थी। यह हैकी जादुई सॉस है जिसकी मुझे आवश्यकता थी। शुक्रिया पेपे और क्रिस!
माइकेटीवी

3
मैं Yii 2.0 का उपयोग कर रहा हूं और .value = '' को सीधे फ़ील्ड पर फ़ॉर्म सत्यापन को ठीक से नहीं चला पा रहा हूं। SetAttribute ('मान', '...') का उपयोग ठीक से किया जाता है। धन्यवाद!
ekscrypto

मेरे पास एक अजीब समस्या है जो हल हो गई है setAttribute। मेरी समस्या एक फ़ंक्शन कॉल के माध्यम से इनपुट के मूल्य को बदल रही थी, पिछले परिवर्तित इनपुटों को भी बदल दें।
सैमप्रो

मैं केवल इस उत्तर का उपयोग करके पॉप-अप मोडल इनपुट (टेक्स्ट) के लिए मूल्य निर्धारित कर सकता हूं। .वेलु ने मेरे लिए काम नहीं किया। धन्यवाद
Ula

19

इन्हें आज़माएं।

document.getElementById("current").value = 12

// or

var current = document.getElementById("current");
current.value = 12

2
ऐसे क्षेत्रों में कभी भी गैर-पाठ मान निर्धारित न करें। (!) आप वापस पढ़ें यदि आप स्ट्रिंग कुछ ब्राउज़रों में पढ़ा जाएगा)
socketpair

18

उत्तर वास्तव में सरल है

// Your HTML text field

<input type="text" name="name" id="txt">

//Your javascript

<script type="text/javascript"> 
document.getElementById("txt").value = "My default value";
</script>

या यदि आप पूरी तरह से जावास्क्रिप्ट से बचना चाहते हैं: आप इसे केवल HTML का उपयोग करके परिभाषित कर सकते हैं

<input type="text" name="name" id="txt" value="My default value">

6
कमाल है कि यहाँ केवल एक व्यक्ति ने valueविशेषता का उपयोग करने का सुझाव दिया है ...
एले टेलर टेलर

@AlgyTaylor ने आपके प्रयास की सराहना की और अपनी अद्भुत टिप्पणी के लिए धन्यवाद
php-

15

यदि आप कई रूपों का उपयोग कर रहे हैं, तो आप उपयोग कर सकते हैं:

<form name='myForm'>
    <input type='text' name='name' value=''>
</form>

<script type="text/javascript"> 
    document.forms['myForm']['name'].value = "New value";
</script>

3
मुझे यह उत्तर पसंद आने का कारण यह है कि आप DOM तत्व ID के बजाय फ़ॉर्म के "नाम" विशेषता का उपयोग करते हैं, जब आपको ज़रूरत नहीं है तो प्रत्येक फॉर्म इनपुट में ID फ़ील्ड क्यों जोड़ें?
कांप

@tremor पूरी तरह से सहमत है, और यह पहला उत्तर है जिसे मैंने "नाम" का उपयोग करते हुए पाया "आईडी" नहीं।
एवोकैडो

8

सरल उत्तर जावास्क्रिप्ट में नहीं है प्लेसहोल्डर पाने के लिए सबसे सरल तरीका है जगह धारक विशेषता

<input type="text" name="text_box_1" placeholder="My Default Value" />

1
इसके साथ समस्या यह है कि यह इंटरनेट एक्सप्लोरर के लिए बिल्कुल भी काम नहीं करता है। यदि आप जानते हैं कि आपके पास IE क्लाइंट नहीं हैं, तो हाँ, यह सबसे अच्छा जवाब है।
Sifu

2
@Sifu यह वास्तव में एक अच्छी बात है, भले ही आपको पता हो कि आपके पास IE क्लाइंट (संभवतः एक जावास्क्रिप्ट समाधान के अलावा) है क्योंकि यह फ़ील्ड खाली होने पर मूल्य को फिर से सेट करेगा।
अरहस 16

1
@Sifu जब IE ने प्लेसहोल्डर विशेषता का समर्थन नहीं किया, तो IE का उपयोग करें और www.1c3br3ak3r-multimedia.ca पर जाएं और खोज बार देखें, यह प्लेसहोल्डर विशेषता का उपयोग करता है
RWolfe

1
@Jdoonan नहीं है कि बहुत पहले वास्तव में - caniuse.com/#feat=input-placeholder प्लेसहोल्डर IE10 और ऊपर
danwellman

6

यह आसान है; एक उदाहरण है:

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
var elem = document.getElementById("example"); // Get text field
elem.value = "My default value"; // Change field
</script>

4
document.getElementById("fieldId").value = "Value";

या

document.forms['formId']['fieldId'].value = "Value";

या

document.getElementById("fieldId").setAttribute('value','Value');

3
setAttribute ( 'मान', 'मान'); Chrome पर मेरे लिए पाठ बॉक्स में दृश्यमान मान सेट नहीं करता है।
कर्टिस

1
<form>
  <input type="number"  id="inputid"  value="2000" />
</form>


<script>
var form_value = document.getElementById("inputid").value;
</script>    

आप डिफ़ॉल्ट मान को नए मान में भी बदल सकते हैं

<script>
document.getElementById("inputid").value = 4000;     
</script>

1

यह हिस्सा आप html में उपयोग करते हैं

<input id="latitude" type="text" name="latitude"></p>

यह javaScript है:

<script>
document.getElementById("latitude").value=25;
</script>

0

आप भी आजमा सकते हैं:

document.getElementById('theID').value = 'new value';

3
नया मान सेट करना डिफ़ॉल्ट मान सेट नहीं कर रहा है। इसलिए, यह समस्या हल नहीं करता है। आपको यह कहना चाहिए कि पोस्ट की टिप्पणी के रूप में एक बार जब आप पर्याप्त प्रतिष्ठा प्राप्त करते हैं।
डैनियल चेउंग
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.