टेक्स्ट इनपुट फ़ील्ड को अक्षम करना अक्षम है, लेकिन

Question

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

असल में, मैं इनपुट क्षेत्र चाहते हैं एक केवल पढ़ने के लिए क्षेत्र के रूप में व्यवहार एक विकलांग क्षेत्र की तरह, लेकिन देखो। क्या यह संभव है?

धन्यवाद।

संपादित करें: इसके अलावा, अगर मैं इसे 'रीडोनली' के रूप में चिह्नित करता हूं, तो फिर भी इसे डबल क्लिक करके अपना मान बदलना संभव है, और पहले वहां मौजूद कुछ चुनना संभव है।

Answer 1

यहां कामकाज है: आपके पास इनपुट अक्षम है जहां आप चाहते हैं (केवल मूल्य प्रदर्शित करने के लिए) और आपके पास आवश्यक नाम और मूल्य के साथ एक छिपी हुई इनपुट है।

Answer 2

आप इसे देखने के लिए सीएसएस का उपयोग कर सकते हैं, हालांकि यह अन्य अक्षम फ़ील्ड क्रॉस ब्राउज़र/प्लेटफार्म से मेल नहीं खा सकता है।

<input type="text" value="Sample text" readonly="readonly" style="color: #787878;"/> 

Answer 3

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

JSF में कोड:

<p:inputText id="entid" value="#{RequestBean.entityID}" onfocus="blur();" /> 

जो निम्न HTML हो जाता है:

<input id="entid" type="text" value="10003" onfocus="blur();" /> 

आप यहाँ उस पर और अधिक देख सकते हैं: How to persist JSF view parameters through validation

Answer 4

मैं यह जानता हूँ के रूप में उत्तर दिया गया लेकिन चाहता था मेरा सीएसएस उदाहरण देने के लिए।

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

border- साथ & शीर्ष एक गहरे रंग आदि तो एक यह इस सीएसएस कोड का उपयोग कर हल होने छोड़ दिया है।

input[readonly]{ 
    border-color: darkgrey; 
    border-style: solid; 
    border-width: 1px; 
    background-color: rgb(235, 235, 228); 
    color: rgb(84, 84, 84); 
    padding: 2px 0px; 
} 

jsfiddle बनाया ताकि आप लोग नज़दीक रूप से देख सकें।

यह क्रोम पर अच्छा लगता है, अन्य ब्राउज़रों पर आपको रंगों को संशोधित करने की आवश्यकता है। फ़ायरफ़ॉक्स की तरह आपको रंग और पृष्ठभूमि-रंग आदि को भी बदलना होगा।

background-color: rgb(240, 240, 240); 
color: rgb(109, 109, 109);