अक्षम इनपुट पर ईवेंट करें

Question

जाहिरा तौर पर एक विकलांग <input>को किसी भी घटना से नियंत्रित नहीं किया जाता है

क्या इस मुद्दे के आसपास काम करने का कोई तरीका है?

<input type="text" disabled="disabled" name="test" value="test" />

$(':input').click(function () {
    $(this).removeAttr('disabled');
})

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

Comments

यहाँ एक अच्छा वैकल्पिक ब्लॉग है ।pengoworks.com

आप असली के लिए गैर-सक्रिय लोगों को अक्षम करते हुए onSubmit हैंडलर में इनपुट पर CSS-pretend- अक्षम और लूप का उपयोग कर सकते हैं।

— पोर्तक

Answer 1

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

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

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​

JQ:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​

उदाहरण: http://jsfiddle.net/RXqAm/170/ ( propइसके बजाय jQuery 1.7 का उपयोग करने के लिए अद्यतन attr)।

Comments

छोटी बात: यदि आप disabledबिना मान वाले विशेषता का उपयोग कर रहे हैं , तो इसका मतलब है कि HTML HTML के बजाय XHTML से है, इस स्थिति में समापन स्लैश अनावश्यक है।

— टिम डाउन

@ समय: वास्तव में यह अनावश्यक है, लेकिन यह अभी भी वैध HTML है। यह वास्तव में आदत का एक बल है और मुझे लगता है कि यह बेहतर दिखता है।

— एंडी ई

Thx एंडी, यह काफी स्मार्ट है। वहाँ सरल नहीं है? क्या आप जानते हैं कि क्यों योग्य इनपुट अप्रचलित नहीं हैं?

— पियरे डे LESPINAY

इसका कोई मतलब नहीं है: कोई अन्य html तत्व माउस घटनाओं को संभालता है, क्यों नहीं एक अक्षम तत्व (उदाहरण के लिए mouseenter, आदि)

— Augustin Riedinger

आप input[disabled] {pointer-events:none}अपने सीएसएस में डालकर अपने क्लिक को "फेंकने" से अक्षम तत्व को रोक सकते हैं । तब क्लिक करें व्यवहार करता है जैसे कि आपने मूल तत्व को क्लिक किया है। IMHO यह सबसे सरल, सबसे साफ समाधान है, लेकिन यह दुर्भाग्य से केवल उन ब्राउज़रों के लिए काम करता है जो pointer-eventsCSS संपत्ति का समर्थन करते हैं: caniuse.com/#search=pointer-events

— Doin

Answer 2

हो सकता है कि आप फ़ील्ड को आसानी से बना सकें और सभी पठनीय फ़ील्ड को अक्षम कर दें

$(".myform").submit(function(e) {
    $("input[readonly]", this).attr("disabled", true);
});

और इनपुट (+ स्क्रिप्ट) होना चाहिए

<input type="text" readonly="readonly" name="test" value="test" />

$('input[readonly]').click(function () {
    $(this).removeAttr('readonly');
})

Comments

+1, यह एक अच्छा वैकल्पिक सुझाव है। केवल नकारात्मक पक्ष यह है कि इनपुट बॉक्स अक्षम स्टाइल पर नहीं लेगा, जो कि ब्राउज़रों के बीच भिन्न होता है, इसलिए उपयोगकर्ता के अक्षम इनपुट की अपेक्षाओं के अनुरूप इसे बनाना कठिन होगा।

— एंडी ई

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

— टोकिमन

उत्कृष्ट वैकल्पिक समाधान। मुझे यह एक बेहतर लगता है क्योंकि आप CSS के साथ कोई भी आवश्यक स्टाइल कर सकते हैं (यानी इसे LOOK अक्षम करें) अभी भी इवेंट उपलब्ध हैं।

— जोशुआ

Answer 3

कुछ ब्राउज़रों में अक्षम तत्व "खाने" पर क्लिक करते हैं - वे न तो उन पर प्रतिक्रिया करते हैं, और न ही उन्हें किसी भी तत्व या इसके कंटेनरों पर इवेंट हैंडलर द्वारा कब्जा करने की अनुमति देते हैं।

IMHO इसे "ठीक" करने का सबसे सरल, सबसे साफ तरीका (यदि आप वास्तव में ओपी करता है जैसे अक्षम तत्वों पर क्लिक कैप्चर करने की आवश्यकता है) तो बस निम्नलिखित सीएसएस को अपने पेज पर जोड़ना है:

input[disabled] {pointer-events:none}

यह मूल तत्व के माध्यम से अक्षम इनपुट फ़ॉल पर कोई क्लिक करेगा, जहाँ आप उन्हें सामान्य रूप से कैप्चर कर सकते हैं। (यदि आपके पास कई अक्षम इनपुट हैं, तो आप प्रत्येक को अपने स्वयं के व्यक्तिगत कंटेनर में डालना चाहते हैं, अगर वे पहले से ही इस तरह से निर्धारित नहीं किए गए हैं - एक अतिरिक्त <span>या एक <div>, कहते हैं - बस इसे अक्षम करना आसान है जो अक्षम इनपुट क्लिक किया गया था)।

---

नकारात्मक पक्ष यह है कि यह चाल दुर्भाग्य से पुराने ब्राउज़रों के लिए काम नहीं करेगी जो pointer-eventsसीएसएस संपत्ति का समर्थन नहीं करते हैं। (यह IE 11, एफएफ v3.6, क्रोम v4 से काम करना चाहिए): caniuse.com/#search=poin-blogents

यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है, तो आपको अन्य उत्तरों में से एक का उपयोग करने की आवश्यकता होगी!

Comments

मुझे यकीन नहीं था कि input[disabled]जावास्क्रिप्ट ( element.disabled = true;) द्वारा अक्षम तत्वों से भी मेल खाएगा, लेकिन ऐसा लगता है कि यह करता है। वैसे भी, मुझे input:disabledक्लीनर मिल जाता है।

— मार्टिन

यह एक अच्छा समाधान की तरह लगता है, IE11 में मेरे लिए काम नहीं करता है, हालांकि! इसके अलावा, आप FF 38+ और Chrome 31+ कहते हैं, लेकिन आपका caniuse लिंक FF 3.6+ और Chrome 4+ कहता है?

— user764754

@ user764754 ... मेरी गलती, मुझे एहसास नहीं था कि पहले के ब्राउज़र संस्करणों को प्राप्त करने के लिए कैनीयूज़ पेज पर "शो ऑल" पर क्लिक करने की आवश्यकता है! तय कर लिया है कि IE11 के रूप में, मैंने अभी इसका परीक्षण किया है, और यह ठीक काम करता है ( कोड के लिए jsfiddle.net/7kkszq1c/1 देखें , हालांकि किसी कारण से jsFiddle साइट ने IE11 में मेरे लिए काम नहीं किया, मुझे इसमें पेस्ट करना पड़ा। इसके बजाय htm फ़ाइल)

— Doin करें

अद्यतन के लिए धन्यवाद! इस बीच मैंने यह भी देखा कि यह IE11 में एक वेबसाइट पर काम करता है लेकिन jsfiddle के साथ नहीं। शायद jsfiddle iframe के कारण ...

— user764754

@Protectorone: अक्षम सीएसएस 3 के बाद से एक छद्म वर्ग है: w3.org/TR/css3-selectors/#UIstates

— मार्टिन

Answer 4

मैं एक विकल्प सुझाऊंगा - CSS का उपयोग करें:

input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
    color: gray;
    cursor: pointer;
}

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

Comments

केवल ie10 के साथ काम करता है, बहुत सारे उपयोगकर्ताओं के पास ie9 / 8. इतना विश्वसनीय विकल्प नहीं है।

— सांकेतिक

यह तब भी फ़ील्ड को तब सबमिट करता है जब फ़ॉर्म सबमिट किया जाता है, जो कई मामलों में अवांछनीय है।

— cimmanon

Answer 5

$(function() {

  $("input:disabled").closest("div").click(function() {
    $(this).find("input:disabled").attr("disabled", false).focus();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div>
  <input type="text" disabled />
</div>

Comments

लेकिन यह फ़ायरफ़ॉक्स पर काम नहीं करता है - और यह पूरी बात थी!

— गेरथोवेन

Answer 6

इसके बजाय disabled, आप उपयोग करने पर विचार कर सकते हैं readonly। कुछ अतिरिक्त सीएसएस के साथ आप इनपुट को स्टाइल कर सकते हैं ताकि यह एक disabledफ़ील्ड जैसा दिखे।

वास्तव में एक और समस्या है। ईवेंट changeकेवल तभी ट्रिगर होता है जब तत्व फोकस खो देता है, जो किसी disabledक्षेत्र पर विचार करने के लिए तर्क नहीं है । संभवतः आप किसी अन्य कॉल से डेटा को इस क्षेत्र में ला रहे हैं। इस काम को करने के लिए आप इवेंट 'बाइंड' का उपयोग कर सकते हैं।

$('form').bind('change', 'input', function () {
    console.log('Do your thing.');
});

Comments

यदि मैं गलत नहीं हूँ तो

— पठन के

यह सही है। इसके बाद @npth awsner के साथ जोड़ा जाना चाहिए।

— Nyacac

धन्यवाद, जो मेरे मामले में स्मार्ट स्वच्छ और आशावादी था।

— सुल्तानोस

Answer 7

या jQuery और CSS के साथ ऐसा करें!

$('input.disabled').attr('ignore','true').css({
    'pointer-events':'none',
     'color': 'gray'
});

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

Comments

@Precastic, यह सच है, लेकिन यह इस बिंदु पर लगभग सभी अन्य ब्राउज़रों के लिए काम करता है और आप <<11 के लिए एक पॉलीफ़िल का उपयोग कर सकते हैं । sidonaldson, शैलियों को लागू करने के लिए सीधे CSS का उपयोग क्यों नहीं करते?

— काइलमिट

@KyleMit आप शैलियों को स्थापित करने के बजाय एक वर्ग जोड़ सकते हैं, लेकिन यह नहीं है कि यह धागा किस बारे में है! मैं केवल पॉइंटर घटनाओं का सुझाव दे रहा था जो अभी भी आपके द्वारा बनाए जा रहे ब्राउज़र मैट्रिक्स के आधार पर एक अच्छा और सही उत्तर है। और उन सभी के लिए धन्यवाद जिन्होंने इस उत्तर को नीचे चिह्नित किया है कि थोड़े के रूप में बेकार है यहां कुछ भी गलत नहीं है: /

— साइडऑनल्ड्सटन

@ सिडोनलडन, यह एक अच्छा जवाब है इसलिए मैं यह भी चाहता हूं कि इसे उच्च स्थान दिया जाए। मुझे यकीन नहीं है कि अनदेखा विशेषता क्या करती है । लेकिन सीएसएस के बारे में मेरी बात यह थी कि मुझे नहीं लगता कि सीएसएस लगाने के लिए हमें jQuery की आवश्यकता है। आप बस एक CSS नियम सेट कर सकते हैं जो समान चयनकर्ता और साथ ही अक्षम पॉइंटर घटनाओं को लक्षित करता है। इस फिडेल में , jQuery और CSS एक ही काम कर रहे होंगे, लेकिन CSS कहीं अधिक परफॉर्मेंट होगा।

— काइलमिट

@KyleMit आह, यह मानते हुए कि फॉर्म जमा किया गया है, आपको किसी तरह बैकेंड को उस फ़ील्ड को अनदेखा करने के लिए बताना होगा यदि इसमें कोई मान शामिल है (क्योंकि हम विकलांग को खराब कर रहे हैं)।

— साइडऑनल्ड्स

मैं सहमत हूं कि सीएसएस अधिक शक्तिशाली हो सकता है क्योंकि आप एक विशेषता के आधार पर चयनकर्ता का उपयोग कर सकते हैं! इस डेमो की जाँच करें, जहाँ मैंने क्रोम के स्वयं के अक्षम क्षेत्र से मिलान किया है: jsfiddle.net/KyleMit/pxx8pk6v

— sidonaldson

Answer 8

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

var doThingsOnClick = function() {
    // your click function here
};

$(document).on({
    'mouseenter': function () {
        $(this).removeAttr('disabled').bind('click', doThingsOnClick);
    },
    'mouseleave': function () {
        $(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
    },
}, 'input.disabled');

Answer 9

मुझे एक और उपाय मिल गया है:

<input type="text" class="disabled" name="test" value="test" />

कक्षा "अक्षम" अपारदर्शिता द्वारा निष्क्रिय तत्व की नकल करें:

<style type="text/css">
    input.disabled {
        opacity: 0.5;
    }
</style>

और फिर ईवेंट को रद्द कर दें यदि तत्व अक्षम है और क्लास हटा दें:

$(document).on('click','input.disabled',function(event) {
    event.preventDefault();
    $(this).removeClass('disabled');
});

Comments

जावास्क्रिप्ट हिस्सा मेरे लिए काम नहीं करता है। इसके अलावा, यह सवाल का जवाब नहीं देता है, क्योंकि यह एक अक्षम इनपुट को सक्षम करने के बारे में है। इस उदाहरण में हालांकि यह शुरुआत में अक्षम नहीं है, और इस तरह सबमिट पर भेज दिया जाता है।

— रायमुंड क्रमर

Answer 10

यहाँ सुझाव इस प्रश्न के लिए एक अच्छे उम्मीदवार की तरह दिखता है

अक्षम तत्व पर क्लिक ईवेंट करना? जावास्क्रिप्ट jQuery

jQuery('input#submit').click(function(e) {
    if ( something ) {        
        return false;
    } 
});

Comments

क्लिक इवेंट संभवत: अक्षम विशेषताओं पर नहीं होगा।

— हेलो यूनिवर्स