html - अनिश्चित चेकबॉक्स के साथ ब्राउज़र मतभेदों से कैसे निपटें




checkbox html-input (3)

प्राइमर: एक HTML चेकबॉक्स को indeterminate रूप में सेट किया जा सकता है, जो इसे न तो चेक करता है और न ही अनचेक करता है। यहां तक ​​कि इस अनिश्चित स्थिति में, अभी भी एक अंतर्निहित बुलियन checked राज्य है।

जब एक अनिश्चित चेकबॉक्स क्लिक किया जाता है, तो यह अपनी indeterminate स्थिति खो देता है। ब्राउज़र (फ़ायरफ़ॉक्स) के आधार पर, यह अतिरिक्त रूप से checked की checked संपत्ति को टॉगल कर सकता checked

यह jsfiddle स्थिति को दर्शाता है। फ़ायरफ़ॉक्स में, किसी भी चेकबॉक्स पर क्लिक करने से उन्हें एक बार प्रारंभिक अंतर्निहित checked स्थिति टॉगल करनी पड़ती checked । आईई में, checked क्लिक को पहले क्लिक के लिए अकेला छोड़ दिया जाता है।

मैं सभी ब्राउज़र को वही व्यवहार करना चाहता हूं, भले ही इसका मतलब अतिरिक्त जावास्क्रिप्ट हो। दुर्भाग्यवश, indeterminate संपत्ति onclick हैंडलर (या change और jquery change ) से पहले झूठी पर सेट की जाती है, इसलिए मुझे पता नहीं लगाया जा सकता है कि इसे indeterminate चेकबॉक्स पर क्लिक के लिए कहा जाता है या नहीं।

mouseup और keyup (स्पेसबार टॉगल के लिए) ईवेंट पूर्व indeterminate स्थिति दिखाते हैं, लेकिन मैं उस विशिष्ट नहीं होना चाहूंगा: यह नाजुक लगता है।

मैं चेकबॉक्स ( data-indeterminate या समान) पर एक अलग संपत्ति बनाए रख सकता था, लेकिन मैं जानना चाहता था कि क्या कोई आसान समाधान है जो मुझे याद आ रहा है, और / या यदि अन्य लोगों के समान समस्याएं हैं।


अच्छी तरह से अपनी खुद की क्लिक करने योग्य छवि बनाएं और इसे इस तरह व्यवहार करने के लिए कुछ जावा (स्क्रिप्ट) का उपयोग करें। मुझे इस बात का संदेह है कि इस राज्य को कितने उपयोगकर्ता समझेंगे, इसलिए सावधान रहें जहां आप इसका इस्तेमाल करते हैं।


मुझे यकीन नहीं है कि अनिश्चित चेकबॉक्स के लिए मूल्य निर्धारित करने के लिए फ़ंक्शन का उपयोग करना अच्छा समाधान होगा क्योंकि:

  • आपको हर जगह बदलना होगा जहां आप उनका उपयोग कर रहे हैं,
  • यदि उपयोगकर्ता चेक-बॉक्स पर क्लिक किए बिना फ़ॉर्म सबमिट करता है, तो आपके बैकएंड को प्राप्त होने वाला मान ब्राउज़र के आधार पर अलग होगा।

लेकिन मुझे यह निर्धारित करने के लिए चालाक तरीका पसंद है कि ब्राउजर कैसे काम करता है। तो आप जांच सकते हैं कि जांच की गई isCheckedAfterIndeterminate() बजाय सामान्य window.navigator.userAgent.indexOf('Trident') >= 0 यह देखने के लिए है कि यह आईई (या शायद अन्य ब्राउज़र जो असामान्य तरीके से काम करता है)।

तो मेरा समाधान होगा:

/// Determine the checked state to give to a checkbox
/// with indeterminate state, so that it becomes checked
/// on click on IE, Chrome and Firefox 5+
function isCheckedAfterIndeterminate()
{
    // Create a unchecked checkbox with indeterminate state
    var test = document.createElement("input");
    test.type = "checkbox";
    test.checked = false;
    test.indeterminate = true;

    // Try to click the checkbox
    var body = document.body;
    body.appendChild(test); // Required to work on FF
    test.click();
    body.removeChild(test); // Required to work on FF

    // Check if the checkbox is now checked and cache the result
    if (test.checked) {
        isCheckedAfterIndeterminate = function () { return false; };
        return false;
    } else {
        isCheckedAfterIndeterminate = function () { return true; };
        return true;
    }
}

// Fix indeterminate checkbox behavoiur for some browsers.
if ( isCheckedAfterIndeterminate() ) {
    $(function(){
        $(document).on('mousedown', 'input', function(){
            // Only fire the change event if the input is indeterminate.
            if ( this.indeterminate ) {
                this.indeterminate = false;
                $(this).trigger('change');
            }
        });
    });
}

यदि आप एक अनिश्चित चेकबॉक्स चाहते हैं जो क्लिक (या कम से कम आईई, क्रोम और एफएफ 5 +) पर सभी ब्राउज़रों पर चेक किया जाता है , तो आपको यहां दिखाए गए चेक किए गए गुण को सही ढंग से प्रारंभ करना होगा, जैसा कि http://jsfiddle.net/K6nrT/6/ । मैंने आपकी सहायता के लिए निम्नलिखित फ़ंक्शन लिखे हैं:

/// Gives a checkbox the inderminate state and the right
/// checked state so that it becomes checked on click
/// on click on IE, Chrome and Firefox 5+
function makeIndeterminate(checkbox)
{
    checkbox.checked = getCheckedStateForIndeterminate();
    checkbox.indeterminate = true;
}

और दिलचस्प कार्य जो फीचर डिटेक्शन पर निर्भर करता है:

/// Determine the checked state to give to a checkbox
/// with indeterminate state, so that it becomes checked
/// on click on IE, Chrome and Firefox 5+
function getCheckedStateForIndeterminate()
{
    // Create a unchecked checkbox with indeterminate state
    var test = document.createElement("input");
    test.type = "checkbox";
    test.checked = false;
    test.indeterminate = true;

    // Try to click the checkbox
    var body = document.body;
    body.appendChild(test); // Required to work on FF
    test.click();
    body.removeChild(test); // Required to work on FF

    // Check if the checkbox is now checked and cache the result
    if (test.checked)
    {
        getCheckedStateForIndeterminate = function () { return false; };
        return false;
    }
    else
    {
        getCheckedStateForIndeterminate = function () { return true; };
        return true;
    }
}

कोई छवि चाल नहीं, कोई jQuery नहीं, कोई अतिरिक्त विशेषता नहीं है और कोई ईवेंट हैंडलिंग शामिल नहीं है। यह केवल साधारण जावास्क्रिप्ट प्रारंभिकरण पर निर्भर करता है (ध्यान दें कि "अनिश्चित" विशेषता HTML मार्कअप में सेट नहीं की जा सकती है, इसलिए जावास्क्रिप्ट प्रारंभिकरण की आवश्यकता होती है)।





html-input