बेहद भयानक रहा है। इस इनपुट के बारे में शिकायतें असंख्य हैं।

संख्या इनपुट समस्याएँ

• असंगतता। अलग-अलग ब्राउज़र उन्हें अलग-अलग तरीके से संभालते हैं। आप क्रोमियम आधारित ब्राउज़र में केवल संख्याएँ दर्ज कर सकते हैं। लेकिन आप फ़ायरफ़ॉक्स और सफारी में कोई भी प्रतीक दर्ज कर सकते हैं, हालांकि वे एक त्रुटि पॉपअप दिखाएंगे।

• जटिलता। वैध संख्याएँ केवल अंक नहीं हैं। संख्या इनपुट negative (-100) और फ़्लोटिंग पॉइंट (0.01) मानों के साथ-साथ वैज्ञानिक नोटेशन (-2.3e4) की अनुमति देता है। जो कभी-कभी मददगार होता है, लेकिन हर बार नहीं.

• अप्रत्याशित व्यवहार। नंबर इनपुट उस मान की रिपोर्ट नहीं करेगा जिसे वह अमान्य मानता है। इसके बजाय रिक्त स्ट्रिंग की सूचना दी गई है. साथ ही, वे मान जिनमें चरण विशेषता से अधिक महत्वपूर्ण अंक हैं, अमान्य माने जाते हैं।

सौभाग्य से, HTML हमें इनमें से अधिकांश समस्याओं को ठीक करने की अनुमति देता है। तो आइए एक बेहतर संख्या इनपुट बनाएं। यहां समर्थन के लिए बुनियादी सुविधाओं की सूची दी गई है।

संख्यात्मक इनपुट सुविधाएँ

• सभी आधुनिक ब्राउज़रों में उपयोगकर्ता इनपुट को लगातार मान्य करता है।

• ऑन-स्क्रीन कीबोर्ड के लिए दशमलव इनपुट मोड सेट करता है।

• ऊपर या नीचे कुंजी दबाने पर वृद्धि और कमी हो सकती है।

इनपुट विशेषताएँ सेट करना

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

उपलब्ध पैटर्न

• (?:0|[1-9]\d*) - केवल अंकों की अनुमति दें, 1234567890

• [ \-]?(?:0|[1-9]\d*) - सकारात्मक और नकारात्मक पूर्णांकों की अनुमति दें, उदा. 1, -2, 3

• [ \-]?(?:0|[1-9]\d*)(?:\.\d )? - फ़्लोटिंग पूर्णांकों की अनुमति दें, उदा. 1.001, -123.9

• [ \-]?(?:0|[1-9]\d*)(?:\.\d )?(?:[eE][ \-]?\d )? - वैज्ञानिक संकेतन की अनुमति दें, उदा. -1.314e12

अब हमारा HTML इस प्रकार दिखना चाहिए।

inputMode='दशमलव' स्पर्श उपकरणों के लिए उचित कीबोर्ड सेट करता है।

autoComplete='off' कष्टप्रद ब्राउज़र स्वत: पूर्ण को अक्षम करने के लिए आवश्यक है, आमतौर पर नाम-जैसे इनपुट के लिए ऐसी कार्यक्षमता की आवश्यकता होती है।

प्रतिक्रिया घटक इंटरफ़ेस

// List of available numeric modes
enum Modes {
    natural = 'natural',
    integer = 'integer',
    floating = 'floating',
    scientific = 'scientific',
}

type Value = string;

export type Props = {
    /** Set controlled value */
    value?: Value;
    /** Provide a callback to capture changes */
    onChange?: (value?: Value) => void;
    /**
     * Define a number to increase or decrease input value
     * when user clicks arrow keys
     */
    step?: number;
    /** Set a maximum value available for arrow stepping */
    max?: number;
    /** Set a minimum value available for arrow stepping */
    min?: number;
    /** Select a mode of numeric input */
    mode?: keyof typeof Modes;
};

export const InputNumeric: FC = ({
    value,
    step = 1,
    max = Infinity,
    min = -Infinity,
    onChange = () => {},
    mode = Modes.scientific,
}) => {
    //...
}

अब हमें मोड सेटिंग के अनुसार पैटर्न विशेषता को प्रबंधित करने की आवश्यकता है।

const patternMapping = {
    [Modes.natural]: '(?:0|[1-9]\\d*)',
    [Modes.integer]: '[ \\-]?(?:0|[1-9]\\d*)',
    [Modes.floating]: '[ \\-]?(?:0|[1-9]\\d*)(?:\\.\\d )?',
    [Modes.scientific]: '[ \\-]?(?:0|[1-9]\\d*)(?:\\.\\d )?(?:[eE][ \\-]?\\d )?',
};

const pattern = patternMapping[mode];

कीस्ट्रोक्स संभालें

यहां तीर कुंजी दबाने को संभालने का तरीका बताया गया है।

const handleKeyDown = useCallback(
    (event: KeyboardEvent) => {
        const inputValue = (event.target as HTMLInputElement).value;
        // handle increment
        if (event.key === 'ArrowUp') {
            // empty input value has to be normalized to zero
            const nextValue = Number(inputValue || 0)   step;
            if (nextValue = min) {
                onChange(nextValue.toString());
            }
        }
    },
    [max, min, onChange, step]
);

उपयोगकर्ता इनपुट सत्यापन

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

हम इस डिज़ाइन और त्रुटि रिपोर्टिंग कार्यक्षमता को बनाने के लिए टेलविंड सीएसएस का उपयोग करने जा रहे हैं।

नीचे इनपुट त्रुटि संदेश के लिए सीएसएस चयनकर्ता बनाने के लिए सहकर्मी वर्ग का नाम आवश्यक है। अमान्य:इनपुट अमान्य होने पर बॉर्डर-रेड-600 वर्ग का नाम बॉर्डर को लाल रंग से रंग देता है।

अदृश्य वर्ग डिफ़ॉल्ट रूप से संकेत संदेश के लिए दृश्यता:छिपा हुआ सेट करता है। Peer-[:invalid]:visible वर्ग निम्नलिखित चयनकर्ता .peer:invalid ~ .peer-\[\:invalid\]\:visible पर खुल जाता है, जो :invalid स्थिति में इनपुट.peer से पहले आने पर संकेत को दृश्यमान बनाता है।

export const InputNumeric: FC = () => {
    const id = useId();
    return (
        

यहां पूर्ण संख्यात्मक इनपुट कोड है:

हैप्पी कोडिंग!