इनपुट प्रकार = पाठ को कैसे निष्क्रिय करें?

123

textयदि संभव हो तो मैं जावास्क्रिप्ट का उपयोग करते हुए एक प्रकार के इनपुट क्षेत्र में लेखन को अक्षम करना चाहता हूं । इनपुट फ़ील्ड एक डेटाबेस से आबादी है; यही कारण है कि मैं नहीं चाहता कि उपयोगकर्ता इसके मूल्य को संशोधित करे।

javascript html

— kawtousse
स्रोत

172

यदि आपको यह पता है कि पेज कब प्रस्तुत किया गया है, तो ऐसा लगता है कि आप ऐसा करते हैं क्योंकि डेटाबेस का मूल्य है, जावास्क्रिप्ट के बजाय प्रदान किए जाने पर इसे अक्षम करना बेहतर है। ऐसा करने के लिए, बस readonlyविशेषता जोड़ें (या disabled, यदि आप इसे फ़ॉर्म सबमिशन से हटाना चाहते हैं) <input>, इस तरह से:

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

— निक क्रेवर
स्रोत

81

मुझे नहीं पता कि इसे वोट क्यों मिलते हैं, यह सवाल का जवाब नहीं देता है। हम जावास्क्रिप्ट उत्तर की उम्मीद कर रहे थे।

— सोफी

3

@ सोफी यह पूछने वाले के लिए सबसे सही तरीका है कि वह अपनी स्थिति के आधार पर ऐसा करे, शायद एक शीर्षक परिवर्तन क्रम में है।

— निक Craver

6

अक्षम मोड इनपुट बॉक्स पर क्लिक की घटनाओं को रोकता है, आसानी से नहीं। FYI करें।

— नॉटोल

"अक्षम" फ़ील्ड की तरह LOOK पर "आसानी से" इनपुट फ़ील्ड प्राप्त करने के लिए, 'स्टाइल = "कलर: ग्रे; बैकग्राउंड-कलर: # F0F0F0;"' सेट करें। (यह इस जवाब के लिए एक टिप्पणी थी )

— जेक टोरंटो 20

2

ध्यान रखें कि ब्राउज़र "अक्षम" या "आसानी से" विशेषता को अनदेखा करने के लिए स्वतंत्र हैं और इस विधि को भरोसेमंद रूप से डेटा को अपडेट होने से रोकने के लिए पर निर्भर नहीं किया जाना चाहिए ... यदि सर्वर-साइड कोड प्रसंस्करण फॉर्म को अभी भी स्वीकार करेगा उस फ़ील्ड से एक मान और इसे अपडेट करें, अपने स्वयं के फॉर्म को बनाने के लिए पर्याप्त प्रेमी के साथ कोई भी इस "अक्षम" को बायपास कर सकता है ... यह केवल एक विश्वसनीय वातावरण में उपयोगकर्ता इंटरफ़ेस सुविधा के लिए है। इसे रोकने का वास्तविक तरीका सर्वर साइड लॉजिक है।

— एरोन वालेंटाइन

206

document.getElementById('foo').disabled = true;

या

document.getElementById('foo').readOnly = true;

ध्यान दें कि readOnlyफ़ायरफ़ॉक्स (जादू) में सही तरीके से काम करने के लिए कैमलकेस में होना चाहिए।

डेमो: https://jsfiddle.net/L96svw3c/ - कुछ हद तक के बीच का अंतर बताते हैं disabledऔर readOnly।

— hudolejev
स्रोत

3

इसने मेरे लिए काम किया। Jquery संस्करण $ ('इनपुट') है। प्रोप ('अक्षम', सत्य)

— डैनियल सन यांग

मुझे इस पर सात साल की देरी है - लेकिन क्या 2017 में इन दोनों के बीच कोई अर्थपूर्ण अंतर है?

— जूल

2

आप बिल्कुल भी देर नहीं करते हैं, जादू अभी भी है: (मुझे याद नहीं है कि मैंने तब किस प्लेटफ़ॉर्म पर परीक्षण किया था, लेकिन आज readonly(निचला हिस्सा) अभी भी उबंटू में फ़ायरफ़ॉक्स 52 में काम नहीं करता है - ऊंट का मामला होना चाहिए।

— हुदोल्जेव

यह काम मेरे लिए क्यों नहीं है? मैंने एक inputतत्व बनाया है id="gate"और मैं आपके कोड की कोशिश करता हूं, जो मेरे लिए काम नहीं करता है ...

— वोल्डेमॉर्ट के क्रोध

21

यदि डेटा डेटाबेस से आबाद है, तो आप इसे प्रदर्शित करने के लिए टैग का उपयोग नहीं करने पर विचार कर सकते हैं <input>। फिर भी, आप इसे टैग में अक्षम कर सकते हैं:

<input type='text' value='${magic.database.value}' disabled>

यदि आपको इसे बाद में जावास्क्रिप्ट के साथ अक्षम करने की आवश्यकता है, तो आप "अक्षम" विशेषता सेट कर सकते हैं:

document.getElementById('theInput').disabled = true;

कारण है कि मैं एक के रूप में मूल्य नहीं दिखाने का सुझाव <input>है, मेरे अनुभव में, यह लेआउट मुद्दों का कारण बनता है। यदि पाठ लंबा है, तो <input>उपयोगकर्ता में पाठ को आज़माने और स्क्रॉल करने की आवश्यकता होगी, जो कि कुछ ऐसा नहीं है जिसे सामान्य लोग अनुमान लगाते हैं। यदि आप इसे एक <span>या कुछ में छोड़ देते हैं, तो आपके पास अधिक स्टाइलिंग लचीलापन है।

— नुकीले
स्रोत

3

अक्षम मन में भालू कुछ ब्राउज़रों पर पाठ को लगभग अपठनीय बना सकता है। आप आसानी से पठनीय विशेषता के साथ बेहतर हो सकते हैं, उदाहरण के लिए <input type = "text" value = "foo" readonly>

— Olly Hodgson

7

आप jquery द्वारा भी कर सकते हैं:

$('#foo')[0].disabled = true;

कार्य उदाहरण:

$('#foo')[0].disabled = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />

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

— चानी पोज़
स्रोत

1

@ चानी पोज़ आप देशी js सेटर को jquery ऑब्जेक्ट पर कॉल कर रहे हैं यह त्रुटि के साथ परिणाम देगा। $ ('# foo') [0]। डिसएबल्ड = ट्रू या $ ('# फ़ू') मिलता है (0)। डिसएबल्ड = ट्रू काम करेगा

— अरेक कोस्ट्रेजेबा

6

अपने इनपुट बॉक्स का संदर्भ लें जो आपको पसंद है (उदाहरण के लिए document.getElementById('mytextbox')) और इसकी readonlyसंपत्ति को इसमें सेट करें true:

myInputBox.readonly = true;

वैकल्पिक रूप से आप इस संपत्ति को इनलाइन (कोई जावास्क्रिप्ट आवश्यक नहीं) जोड़ सकते हैं:

<input type="text" value="from db" readonly="readonly" />

— रोतीन मारथ
स्रोत

यदि आप HTML लिख रहे हैं (XHTML के विपरीत) जो <इनपुट प्रकार = "पाठ" मान = "db से" readonly> होगा

— Olly Hodgson