अनुपयोगी HTML

आप लोग सोच सकते हैं कि एक सुसंगत, स्वच्छ और पेशेवर स्पिनबॉक्स बनाना HTML में एक सरल कार्य होगा... हालाँकि, हमारी निराशा के लिए, किसी इनपुट को यह बताने के लिए कोई मानक विशेषता नहीं है कि इसे केवल पूर्णांक या दशमलव मान स्वीकार करना चाहिए , सभी इनपुट फ़िल्टरिंग JS होनी चाहिए। आउटच!

मैं जीवन को आसान बनाने के लिए गो, ए-एच/टेम्पल, टेलविंड और अपने प्रिय अल्पाइन.जेएस के साथ इस कार्यक्षमता को लागू करने जा रहा हूं।

कंकाल जोड़ना

हम अपने पूर्णांक स्पिनबॉक्स के लिए एक मूल टेम्पलेट लिखकर शुरुआत करते हैं:

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  ...
}

हम IntInterval को इस प्रकार परिभाषित करते हैं:

type IntInterval struct {
  A, B int
}

अंतराल के साथ, हम न्यूनतम और अधिकतम इनपुट सेट करेंगे। चूंकि हम एक पूर्णांक स्पिनबॉक्स बना रहे हैं, चरण हमेशा '1' पर सेट किया जाएगा।

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
}

सीएसएस जोड़ना

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

डिफ़ॉल्ट स्पिनर बटन को हटाने के लिए निम्नलिखित अतिरिक्त कक्षाओं का उपयोग किया जाता है:
[&::-वेबकिट-इनर-स्पिन-बटन]:[-वेबकिट-उपस्थिति:कोई नहीं] [&::-वेबकिट-बाहरी-स्पिन-बटन]:[-वेबकिट-उपस्थिति:कोई नहीं] [-मोज़-उपस्थिति: पाठ्य से भरा]

अंत में, आइए कुछ बुनियादी पैडिंग, रिंग, रंग आदि जोड़ें...
ब्लॉक डब्ल्यू-फुल राउंडेड-एल-एमडी पीवाई-2 पीएक्स-2.5 टेक्स्ट-ग्रे-900 रिंग-1 रिंग-इनसेट रिंग-ग्रे-300 प्लेसहोल्डर: टेक्स्ट-ग्रे-400 फोकस: आउटलाइन-कोई नहीं फोकस: रिंग-2 फोकस: रिंग-प्राइमरी-400 बीजी-ग्रे-50 एसएम:टेक्स्ट-एसएम एसएम:लीडिंग-6

इसे अपने टेम्पलेट में जोड़ने पर, हमें निम्नलिखित मिलता है:

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
}

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

फ़िल्टर लागू करना

एक पूर्णांक स्पिनबॉक्स का मूल विचार एक इनपुट का है जो केवल पूर्णांक स्वीकार करता है। मैंने प्रारंभ में HTML के पैटर्न विशेषता का उपयोग करके इस फ़ंक्शन को निम्नानुसार कार्यान्वित करने का प्रयास किया:

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

'ऑनइनपुट' घटना

हर बार जब उपयोगकर्ता इनपुट बॉक्स के अंदर कोई कुंजी दबाता है, तो एक ऑनइनपुट ईवेंट उत्पन्न होता है। इस घटना को अल्पाइन के सिंटैक्स x-on:input के साथ कैप्चर करें और इनपुट तत्व के अनुसार मान को सुधारें। आइए एक एक्स-डेटा एट्रिब्यूट सेट के साथ एक पैरेंट डिव बनाएं, और एक फ़ंक्शन जोड़ें जो हमें यह जांचने की अनुमति देगा कि क्या इनपुट बिल्कुल एक संख्या है... जिसके बाद हम मान को तदनुसार पूर्णांकित कर सकते हैं।

उन लोगों के लिए जो अल्पाइन नहीं जानते हैं, यहां $el का उपयोग वर्तमान DOM तत्व को संदर्भित करने के लिए किया जाता है।

कस्टम स्पिनर

पहले बनाए गए पैरेंट डिव में, हम निम्नलिखित क्लास = "फ्लेक्स" जोड़ते हैं और इनपुट में एक x-ref = "स्पिनबॉक्स" विशेषता जोड़ते हैं ताकि हमारे बटन जादुई संपत्ति $refs.spinbox के माध्यम से इसकी स्थिति को संशोधित कर सकें:

हम इनपुट के बाद एक नया बच्चा जोड़ते हैं, जिसमें हमारे बटन होंगे:

  

    
    -
    
     
  

यहाँ, हम टैब क्रम को सही रखने के आसान तरीके के रूप में फ्लेक्स-कॉल-रिवर्स का उपयोग करते हैं, इसे पहले '-', फिर '' पर टैब करना चाहिए।

फिर हम x-on:click का उपयोग करके बटनों में ईवेंट हैंडलर जोड़ते हैं, पूरा कोड (सीएसएस को छोड़कर) इस प्रकार है:

  

    
    -
    
     
  

हमें कोई भी अंकगणित करने से पहले e.value और e.step को परिवर्तित करना होगा क्योंकि वे स्ट्रिंग हैं।

जब स्पिनर बटन के लिए सीएसएस की बात आती है, तो उन्हें इनपुट के समान ही स्टाइल किया जाता है, पूरा कोड नीचे है।

अंतिम टेम्पलेट

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
  

    @InputLabel(name, label   " "   interval.toString(), tooltip)

    

          
          -
          
           
        
    
  
}

आनंद लेना :)

पर काम करता है

• मोज़िला फ़ायरफ़ॉक्स 130.0 (64-बिट)
• संस्करण 128.0.6613.120 (आधिकारिक बिल्ड) (64-बिट)