मैं एक टेक्स्ट इनपुट को गैर-संपादन योग्य कैसे बनाऊँ?

Question

इसलिए मेरे पास एक टेक्स्ट इनपुट है

<input type="text" value="3" class="field left">

यहाँ इसके लिए मेरा सीएसएस है

background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px; 

क्या इसकी कोई सेटिंग या ट्रिक है, मैं इसके बजाय एक लेबल करने के बारे में सोच रहा था लेकिन स्टाइल के बारे में कैसे। मैं उन्हें कैसे परिवर्तित करूं और क्या कोई बेहतर तरीका है या वह एकमात्र तरीका है?

Answer 1

<input type="text" value="3" class="field left" readonly>

कोई स्टाइल जरूरी नहीं।

<input>MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#ttttes पर देखें

Comments

या readonly = "readonly" यदि आपको यह सब XML-y पसंद है, तो Stephan Muller का उदाहरण नीचे देखें :)

— Algy Taylor

@Algy टेलर: हाँ, यह मूल जवाब में था जब मूल प्रश्न एक स्वच्छंद [एक्सएचटीएमएल] टैग है कि हर कोई पागल के बारे में जो मानक है जिसके लिए मान्य था चलाई थी: /

— BoltClock

क्या उस लाल घेरे को हटाने का कोई तरीका है जो विशेषता के textareaसाथ घूमने पर आता है readonly?

— चौधरी वकास

@ शफिज़ादे - नहीं, और यह एक अच्छी बात है। ब्राउज़रों के लिए सही तरीके से लागू करना मुश्किल होगा, और लोगों को समझने के लिए भ्रमित करना होगा। एक सरल नियंत्रण एक जटिल कार्य करने की कोशिश न करें। प्रत्येक टुकड़ा सरल (एक संपादन योग्य नियंत्रण, फिर एक गैर-संपादन योग्य HTML तत्व, फिर एक और संपादन योग्य नियंत्रण) के साथ अपने इनपुट को टुकड़ों में तोड़ दें।

— टूलमेकरसेव

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

— कर्ट वान डेन ब्रेंडन

Answer 2

आप readonlyइनपुट में विशेषता जोड़ सकते हैं :

<input type="text" value="3"
       class="field left" readonly="readonly">

अधिक जानकारी: http://www.w3schools.com/tags/att_input_readonly.asp

Answer 3

आप readonlyविशेषता का उपयोग कर सकते हैं , यदि आप चाहते हैं कि आपका इनपुट केवल पढ़ा जाए। और disabledयदि आप इनपुट दिखाना चाहते हैं, तो आप विशेषता का उपयोग कर सकते हैं , लेकिन पूरी तरह से अक्षम (यहां तक ​​कि PHP की तरह प्रसंस्करण भाषाओं को भी नहीं पढ़ सकते हैं)।

Comments

जब आप एक php फ़ाइल को फ़ॉर्म भेजते हैं, तो यह अक्षम इनपुट को नहीं पढ़ेगा। यह वही हो सकता है जिसका वह मतलब है।

— कार्लोस

क्या होता है कि निष्क्रिय इनपुट्स ईवीएन सेंड नहीं होते हैं जब आप फॉर्म जमा करते हैं, तो इसका php, js या किसी भी चीज से कोई लेना-देना नहीं है।

— वासिलेविच

Answer 4

बस उपलब्ध उत्तर को पूरा करने के लिए:

एक इनपुट तत्व या तो आसानी से या अक्षम किया जा सकता है (उनमें से कोई भी संपादन योग्य नहीं है, लेकिन कुछ अंतर हैं: फ़ोकस, ...

अच्छी व्याख्या यहाँ पाई जा सकती है:
HTML फार्म इनपुट फ़ील्ड के लिए अक्षम = "अक्षम" और आसानी से = "आसानी से" के बीच अंतर क्या है?

कैसे इस्तेमाल करे:

<input type="text" value="Example" disabled /> 
<input type="text" value="Example" readonly />

जैसा कि यहां बताया गया है, सीएसएस या जावास्क्रिप्ट के माध्यम से इसे बनाने के लिए कुछ समाधान भी हैं ।

Comments

यदि आप />अपने टैग्स को बंद करने के लिए उपयोग करने जा रहे हैं , तो आप अपनी विशेषताओं का विस्तार disabled="disabled"और readonly="readonly"भी कर सकते हैं।

— बोल्टलॉक

Answer 5

<input type="text" value="3" class="field left" readonly>

आप https://www.w3schools.com/tags/att_input_readonly.asp में देख सकते हैं

"आसानी से" सेट करने की विधि:

$("input").attr("readonly", true)

"पढ़ने के लिए" (jQuery में काम) को रद्द करने के लिए:

$("input").attr("readonly", false)

Answer 6

आसानी से विशेषता जोड़ें

<input type="text" value="3" class="field left" readonly="readonly" >

या -

<input type="text" value="3" class="field left" readonly>

कोई सीएसएस की जरूरत है!

Comments

इससे यह सवाल क्या जुड़ता है कि 3 साल से अधिक समय पहले से मेरा जवाब और स्टीफन का जवाब पहले से ही नहीं था? आपने सीएसएस के बारे में मेरे बयान को भी स्पष्ट नहीं किया है।

— BoltClock

Answer 7

आपको अंत में केवल विकलांगों को जोड़ना होगा

<input type="text" value="3" class="field left" disabled>

Comments

यदि आप इसे अक्षम करने के लिए सेट करते हैं, तो मान सबमिट नहीं किया गया है। यह वह हो सकता है जिसकी आपको आवश्यकता है, लेकिन यह वह नहीं है जो पूछा गया था। एक साइड नोट के रूप में, मैं यहां ठीक

— ठाक

Answer 8

जोड़ें readonly:

<input type="text" value="3" class="field left" readonly>

यदि आप चाहते हैं कि मान किसी प्रपत्र में प्रस्तुत न किया जाए, तो इसके बजाय disabledविशेषता जोड़ें ।

<input type="text" value="3" class="field left" disabled>

CSS का उपयोग करने का कोई तरीका नहीं है जो हमेशा ऐसा करने के लिए काम करता है।

क्यों? CSS कुछ भी "अक्षम" नहीं कर सकता है। आप अभी भी प्रदर्शन या दृश्यता को बंद कर सकते हैं और उपयोग कर सकते हैं pointer-events: noneलेकिन pointer-eventsIE के संस्करणों पर काम नहीं करता है जो IE 11 की तुलना में पहले आया था।

Answer 9

यदि आप वास्तव में CSS का उपयोग करना चाहते हैं , तो निम्नलिखित संपत्ति का उपयोग करें जो क्षेत्र को गैर-संपादन योग्य बना देगा।

pointer-events: none;