मैं CSS का उपयोग करके फॉर्म फ़ील्ड को कैसे अक्षम करूं?

Question

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

<input type="text" name="username" value="admin" >
<style type="text/css">
  input[name=username] {
    disabled: true; /* Does not work */
  }
</style>

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

यह बहुत उत्सुक है कि आपके पास सीएसएस में दृश्य और प्रदर्शन गुण हैं लेकिन सक्षम / अक्षम नहीं है। क्या अभी भी अंडर-वर्क्स एचटीएमएल 5 मानक, या यहां तक ​​कि कुछ गैर-मानक (ब्राउज़र विशिष्ट) में ऐसा कुछ है?

Comments

यह नीचे कई बार उल्लेख किया गया है लेकिन यह शोर में खो गया है। सूचक-घटनाओं का प्रयास करें: कोई नहीं;

— कोरी एलिक्स

Answer 1

यह मददगार हो सकता है:

<input type="text" name="username" value="admin" >

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

अपडेट करें:

और यदि आप टैब इंडेक्स से अक्षम करना चाहते हैं तो आप इसे इस तरह से उपयोग कर सकते हैं:

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

Comments

ऐसा लग रहा था जैसे मैं अपने सभी इनपुट फ़ील्ड को अक्षम करने के बाद ही था, लेकिन हालाँकि, यह उन्हें माउस ईवेंट से रोकता है, फिर भी उन्हें कीबोर्ड टैब का उपयोग करके बदला और बदला जा सकता है

— Ken

टैब-इंडेक्स सीएसएस संपत्ति मौजूद नहीं है। इसे html विशेषता (tabindex = -1)

— N4ppeL

टैब-इंडेक्स क्रोम में नहीं मिल रहा है और काम नहीं कर रहा है, टाब कुंजी को निष्क्रिय कर दिया गया है ताकि यह पूरी तरह से समाधान न हो।

— QMaster

Answer 2

आप CSS का उपयोग करके अक्षम प्रभाव को नकली कर सकते हैं।

pointer-events:none;

आप रंग आदि बदलना भी चाह सकते हैं।

Comments

यह मदद करता है, लेकिन खेतों में टैब करने से नहीं रोकता है।

— jerwood

मैं एक ब्रेडक्रंब के अंतिम लिंक को "अक्षम" करना चाहता था, और मैं इस वर्कअराउंड को ध्यान में नहीं रखता था ... इसके लिए कुछ रंग परिवर्तन और बिना रेखांकन के साथ धन्यवाद, इसने चाल बना दी! : डी

— फेसुंडो कैमेडियर

यह फ़ॉर्म मानों को सबमिट होने से भी नहीं रोकता है।

— केन वेन वांडरलिंडे

@KenWayneVanderLinde न तो अक्षम विशेषता को सही करता है?

— Theonlygusti

@theonlygusti अक्षम <इनपुट> तत्वों को एक रूप में प्रस्तुत नहीं किया जाएगा।

— dougd_in_nc

Answer 3

चूंकि नियम जावास्क्रिप्ट में चल रहे हैं, उन्हें जावास्क्रिप्ट (या मेरे उदाहरण के मामले में, jQuery) का उपयोग करके अक्षम क्यों नहीं किया जाए?

$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable

अपडेट करें

attrसमारोह अब इस के लिए प्राथमिक दृष्टिकोण, के रूप में नीचे टिप्पणी में बताया गया है। यह अब propफ़ंक्शन के साथ किया जाता है ।

$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable

Comments

ऐसा नहीं होना चाहिए कि $ ('# फ़ाइनली')। removeAttr ('अक्षम'); // सक्षम

— अनुपम जैन

यह संभवतः ध्यान देने योग्य है कि यदि उपयोगकर्ता ने जावास्क्रिप्ट को अक्षम कर दिया है तो यह समाधान काम नहीं करेगा।

— josh-fuggle

फ़ायरफ़ॉक्स 20.0 (अन्य संस्करणों के बारे में निश्चित नहीं है, यह वही है जो मैं विकसित करने के लिए उपयोग कर रहा हूं) को विशेषता को हटाने की आवश्यकता है। जबकि @ Dutchie432 सिद्धांत में सही है, .removeAttr ('अक्षम') का उपयोग करके; सही व्यावहारिक समाधान है (कम से कम मेरे वर्तमान ब्राउज़र में)।

जब तक आप JQuery का उपयोग नहीं कर सकते।

— मरीन

FYI करें - jQuery प्रलेखन इस मामले .prop()के .attr()लिए उपयोग करने का सुझाव देता है । "JQuery 1.6 के रूप में, .attr () विधि उन विशेषताओं के लिए अपरिभाषित है, जो सेट नहीं की गई हैं। DOM प्रॉपर्टीज़ जैसे चेक किए गए, चयनित या अक्षम किए गए राज्य गुण को पुनः प्राप्त करने और बदलने के लिए .prop () विधि का उपयोग करें। " सोर्स डॉक्यूमेंटेशन: .attr () और .प्रॉप ()

— निकोलस रयान बोवर्स

Answer 4

यह बहुत उत्सुक है कि आपके पास सीएसएस में दृश्य और प्रदर्शन गुण हैं लेकिन सक्षम / अक्षम नहीं है।

यह बहुत उत्सुक है कि आपको लगता है कि बहुत उत्सुक है। आप सीएसएस के उद्देश्य को गलत समझ रहे हैं। सीएसएस का अर्थ रूप तत्वों के व्यवहार को बदलना नहीं है । यह केवल उनकी शैली को बदलने के लिए है । टेक्स्ट फ़ील्ड को छिपाने का मतलब यह नहीं है कि टेक्स्ट फ़ील्ड अब नहीं है या जब आप फॉर्म सबमिट करते हैं तो ब्राउज़र अपना डेटा नहीं भेजेगा। यह सब वह उपयोगकर्ता की आंखों से छिपा है।

वास्तव में अक्षम अपने क्षेत्रों के लिए, आपको चाहिए का उपयोग disabledHTML में विशेषता या disabledजावास्क्रिप्ट में डोम संपत्ति।

Comments

बेशक मुझे पता है कि सीएसएस "माना जाता है" किस लिए है। लेकिन आधुनिक वेबएप्स के लिए "प्रस्तुति" और "व्यवहार" के बीच का अंतर कीचड़ से भी अधिक कठिन है। चूंकि अक्षम फ़ील्ड सर्वर पर सबमिट नहीं किए जाते हैं, यह एक व्यवहार परिवर्तन है। लेकिन फिर एक नहीं बल्कि सभी फॉर्म फील्ड को कैसे छुपाया जाता है ?! शायद अच्छे पुराने दिनों में जब आप वेब पर सभी पाठ पढ़ सकते हैं और फॉर्म भर सकते हैं, तो अंतर स्पष्ट था। आधुनिक वेबऐप में, यदि आप प्रस्तुति को व्यवहार से अलग करना चाहते हैं, तो CSS बनाम HTML / JS इसे करने का गलत तरीका है।

— अनुपम जैन

विकलांग एक अवस्था है, व्यवहार नहीं। वह जो मांग रहा है वह पूरी तरह से उचित है। उदाहरण के लिए, आप डेटा संसाधित होने के दौरान एक व्यस्त वर्ग को कई क्षेत्रों में जोड़ना चाह सकते हैं। इसके अलावा, W3C सहमत लगता है क्योंकि यह अक्षम छद्म वर्ग के माध्यम से तत्वों के सीएसएस चयन की अनुमति देता है।

— IANNNN

@IAmNaN: 1) "विकलांग राज्य है, व्यवहार नहीं।" तो बस हर दूसरे HTML / DOM विशेषता के बारे में है। 2) "उदाहरण के लिए, आप डेटा संसाधित होने के दौरान एक व्यस्त वर्ग को कई क्षेत्रों में जोड़ना चाह सकते हैं।" आप ऐसा स्क्रिप्ट में करते हैं। 3) "इसके अलावा, W3C सहमत प्रतीत होता है क्योंकि यह सीएसएस को अक्षम छद्म वर्ग के माध्यम से तत्वों के चयन की अनुमति देता है।" यह सक्षम या अक्षम होने के आधार पर किसी तत्व का चयन करने में सक्षम होने के नाते सीएसएस का उपयोग करके उस स्थिति को बदलने में सक्षम होने के साथ कुछ नहीं करना है ।

— BoltClock

CSS में कई चीजें हैं जिन्हें वास्तव में व्यवहार में परिवर्तन माना जा सकता है जैसे कि सूचक-घटनाएँ: कोई नहीं; @ANaimi द्वारा उल्लेख किया गया है। इसलिए विकलांगों को आसानी से प्रदर्शन संपत्ति माना जा सकता है। बहुत बुरा यह नहीं है, कुछ चीजें आसान कर देगा।

— मिकेल लेपिस्टो

@ मिकेल लेपिस्टो: हाँ, मैं pointer-eventsसीएसएस संपत्ति होने के साथ सहमत नहीं हूं । FYI करें, pointer-events SVG से उत्पन्न होता है ।

— BoltClock

Answer 5

आप Textbox को निष्क्रिय करने के लिए CSS का उपयोग नहीं कर सकते। समाधान HTML विशेषता होगा।

disabled="disabled"

Comments

हालांकि यह सिद्धांत रूप में काम करता है, यदि आप पूरा प्रश्न पढ़ते हैं तो यह कहता है कि प्रपत्र फ़ील्ड स्वतः उत्पन्न हो रही है, और फिर बाद में अक्षम होने की आवश्यकता है।

— सलेम

@mr_eclair। इसका उपयोग संभव है ---> सूचक-घटनाएँ: कोई नहीं; सीएसएस संपत्ति।

— फेरेयुडून बारिकज़ेहि

नोट: disabledविशेषता वाले तत्व सबमिट नहीं किए जाते हैं - उनके मान सर्वर पर पोस्ट नहीं किए जाते हैं। आगे पढ़ें: stackoverflow.com/q/8925716/1066234

— काई नैक

Answer 6

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

इसे अपने प्राकृतिक निष्कर्ष पर ले जाने के लिए, आप प्रत्येक वास्तविक इनपुट के लिए दो html इनपुट लिख सकते हैं (एक सक्षम, और एक विकलांग) और फिर उन्हें दिखाने और छिपाने के लिए CSS को नियंत्रित करने के लिए जावास्क्रिप्ट का उपयोग करें।

Comments

यदि आपके जावास्क्रिप्ट का उपयोग कर यह सिर्फ निष्क्रिय करने के लिए समझ में आता / सक्षम के रूप में की जरूरत नहीं है?

— माइंडवॉक्स

वास्तव में, लेकिन इस विशेष प्रश्न के संदर्भ में, यह एक व्यवहार्य दृष्टिकोण हो सकता है।

— ग्राफिकडिविन

Answer 7

पहली बार कुछ जवाब दे रहा है, और बस थोड़ा देर से लग रहा है ...

मैं इसे जावास्क्रिप्ट द्वारा करने के लिए सहमत हूं, यदि आप पहले से ही इसका उपयोग कर रहे हैं।

एक समग्र संरचना के लिए, जैसे मैं आमतौर पर उपयोग करता हूं, मैंने उपयोगकर्ता इंटरेक्शन से तत्वों को ब्लॉक करने के लिए तत्व के बाद एक सीएसएस छद्म बनाया है, और पूरी संरचना में हेरफेर किए बिना स्टाइल की अनुमति देता है।

उदाहरण के लिए:

<div id=test class=stdInput>
    <label class=stdInputLabel for=selecterthingy>A label for this input</label>
    <label class=selectWrapper>
         <select id=selecterthingy>
             <option selected disabled>Placeholder</option>
             <option value=1>Option 1</option>
             <option value=2>Option 2</option>
         </select>
    </label>
</div>

मैं disabledरैपिंग पर एक क्लास लगा सकता हूंdiv

.disabled { 
    position : relative; 
    color    : grey;
}
.disabled:after {
    position :absolute;
    left     : 0;
    top      : 0;
    width    : 100%;
    height   : 100%;
    content  :' ';
}

यह पाठ को ग्रे कर divदेगा और इसे उपयोगकर्ता के लिए अनुपयोगी बना देगा।

मेरा उदाहरण JSFiddle

Comments

BTW: आपको अभी भी टैबिंग को संभालने की आवश्यकता है जो अभी भी उपयोगकर्ता को फ़ील्ड में जाने और इसे बदलने की अनुमति देता है।

— के किम्बल

ऐसा नहीं होना चाहिए <select> के पास एक क्लास = "अक्षम" है?

— टिमोसोलो

यह शानदार है मुझे पता था कि ऐसा कुछ था। :) धन्यवाद

— जेम्स हैरिंगटन

यह वास्तव में उपयोगी है। मुझे पता है कि विकलांगों को सेट करने के लिए जावास्क्रिप्ट का उपयोग करना बेहतर होगा, लेकिन यह उपयोगकर्ताओं (यह एक त्रुटि संदेश के अलावा) को स्पष्ट करने की मेरी समस्या को हल करता है जो सबमिट करने से काम नहीं चलेगा।

— jerclarke

Answer 8

मैं हमेशा उपयोग कर रहा हूं:

input.disabled {
    pointer-events:none;
    color:#AAA;
    background:#F5F5F5;
}

और फिर इनपुट क्षेत्र में css वर्ग को लागू करना:

<input class="disabled" type="text" value="90" name="myinput" id="myinput" />

Answer 9

इनपुट [नाम = उपयोगकर्ता नाम] {अक्षम: सच; /* काम नहीं करता */ }

मुझे पता है कि यह प्रश्न काफी पुराना है लेकिन अन्य उपयोगकर्ताओं के लिए जो इस समस्या के लिए आते हैं, मुझे लगता है कि इनपुट को अक्षम करने का सबसे आसान तरीका केवल ":" है

<input type="text" name="username" value="admin" disabled />
<style type="text/css">
  input[name=username]:disabled {
    opacity: 0.5 !important; /* Fade effect */
    cursor: not-allowed; /* Cursor change to disabled state*/
  }
</style>

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

उदाहरण के लिए jQuery में:

if (condition) {
// Make this input prop disabled state
  $('input').prop('disabled', true);
}
else {
// Do something else
}

आशा है कि CSS में उत्तर मदद करता है।

Answer 10

आप ऐसा नहीं कर सकते कि मुझे डर है, लेकिन आप निम्नलिखित को jQuery में कर सकते हैं, यदि आप फ़ील्ड में विशेषताओं को जोड़ना नहीं चाहते हैं। बस इसे अपने <head></head>टैग के अंदर रखें

$(document).ready(function(){ 
  $(".inputClass").focus(function(){
    $(this).blur();
  }); 
});

यदि आप DOM (JS के साथ) में फ़ील्ड्स बना रहे हैं, तो आपको इसके बजाय ऐसा करना चाहिए:

$(document).ready(function(){ 
  $(document).on("focus", ".inputClass", function(){
    $(this).blur();
  }); 
});

Answer 11

यह आपके इनपुट तत्व के शीर्ष पर ओवरले लगाकर एक गैर-महत्वपूर्ण उद्देश्य के लिए किया जा सकता है। यहाँ शुद्ध HTML और CSS में मेरा उदाहरण है।

https://jsfiddle.net/1tL40L99/

    <div id="container">
        <input name="name" type="text" value="Text input here" />
        <span id="overlay"></span>
    </div>

    <style>
        #container {
            width: 300px;
            height: 50px;
            position: relative;
        }
        #container input[type="text"] {
            position: relative;
            top: 15px;
            z-index: 1;
            width: 200px;
            display: block;
            margin: 0 auto;
        }
        #container #overlay {
            width: 300px;
            height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
            background: rgba(255,0,0, .5);
        }
    </style>

Answer 12

इस उद्देश्य के लिए सीएसएस का उपयोग करने का कोई तरीका नहीं है। मेरी सलाह है कि आप जावास्क्रिप्ट कोड को शामिल करें जहाँ आप इनपुट पर लागू css वर्ग को बदलते या बदलते हैं। ऐसा कुछ :

function change_input() {
	$('#id_input1')
		.toggleClass('class_disabled')
		.toggleClass('class_enabled');
		
	$('.class_disabled').attr('disabled', '');
	$('.class_enabled').removeAttr('disabled', '');
}

.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form> 	
	Input: <input id="id_input1" class="class_enabled" />		
	<input type="button" value="Toggle" onclick="change_input()";/>	
</form>

Answer 13

pointer-events: none;समाधान की एक भिन्नता , जो इनपुट के मुद्दे को हल करती है, जिस पर लेबल नियंत्रण या टैबइंडेक्स के माध्यम से यह अभी भी सुलभ है, इनपुट को div में लपेटना है, जिसे एक अक्षम पाठ इनपुट के रूप में स्टाइल किया गया है, और input { visibility: hidden; }इनपुट "अक्षम" होने पर सेट किया जाता है ।
रेफरी: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

div.dependant {
  border: 0.1px solid rgb(170, 170, 170);
  background-color: rgb(235,235,228);
  box-sizing: border-box;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type {
  display: inline-block;
}
input[type="checkbox"]:checked ~ div.dependant:first-of-type {
  display: contents;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input {
  visibility: hidden;
}

<form>
  <label for="chk1">Enable textbox?</label>
  <input id="chk1" type="checkbox" />
  <br />
  <label for="text1">Input textbox label</label>
  <div class="dependant">
    <input id="text1" type="text" />
  </div>
</form>

ऊपर स्निपेट में लागू अक्षम स्टाइलिंग क्रोम UI से ली गई है और अन्य ब्राउज़रों पर अक्षम इनपुट के समान नहीं हो सकती है। संभवतः यह इंजन-विशिष्ट CSS एक्सटेंशन -prefixes का उपयोग करके व्यक्तिगत ब्राउज़रों के लिए अनुकूलित किया जा सकता है। हालांकि एक नज़र में, मुझे नहीं लगता कि यह हो सकता है:
Microsoft CSS एक्सटेंशन , मोज़िला CSS एक्सटेंशन , WebKit CSS एक्सटेंशन

यह एक अतिरिक्त मूल्य visibility: disabledया display: disabledशायद यहां तक appearance: disabledकि पेश करने के लिए अधिक समझदार प्रतीत होता है , यह देखते हुए कि visibility: hiddenपहले से ही लागू तत्वों के व्यवहार को प्रभावित करता है किसी भी संबंधित नियंत्रण तत्व।