जावास्क्रिप्ट का उपयोग करके HTML में टेक्स्ट क्षेत्रों पर अधिकतम लंबाई लगाने के लिए एक व्यापक मार्गदर्शिका

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

समाधान:

इस समाधान की कुंजी जावास्क्रिप्ट की क्षमता में निहित है सभी पाठ क्षेत्रों के लिए पृष्ठ को स्कैन करने और गतिशील रूप से ईवेंट श्रोताओं को उचित क्षेत्रों में जोड़ने के लिए। ऑनलोड ईवेंट का लाभ उठाकर, हम लोड होने पर किसी भी टेक्स्ट क्षेत्र सहित पूरे पृष्ठ की सामग्री तक पहुंच प्राप्त करते हैं।

window.onload = function() {

अब, हम दस्तावेज़ को पार कर सकते हैं, TEXTAREA टैग के साथ सभी तत्वों की खोज:

var txts = document.getElementsByTagName('TEXTAREA');

इसके बाद, हम यह जांचने के लिए प्रत्येक टेक्स्ट क्षेत्र के माध्यम से पुनरावृत्त करते हैं कि क्या इसमें वैध अधिकतम लंबाई विशेषता है . ध्यान दें कि हम यह सुनिश्चित करने के लिए नियमित अभिव्यक्ति का उपयोग करते हैं कि अधिकतम लंबाई मान एक संख्या है।

for(var i = 0, l = txts.length; i 
प्रत्येक क्वालीफाइंग टेक्स्ट क्षेत्र के लिए, हम अधिकतम लंबाई को मान्य करने के लिए एक कॉलबैक फ़ंक्शन को परिभाषित करते हैं . यह फ़ंक्शन:
एक पूर्णांक के रूप में अधिकतम लंबाई विशेषता का मान पुनर्प्राप्त करेगा
जांचें कि पाठ क्षेत्र के मान की वर्तमान लंबाई अधिकतम लंबाई से अधिक है या नहीं
यदि पार हो गई है , एक चेतावनी संदेश प्रदर्शित करें और मान को अधिकतम अनुमत लंबाई तक छोटा करें
var func = function() {
    var len = parseInt(this.getAttribute("maxlength"), 10);

    if(this.value.length > len) {
        alert('Maximum length exceeded: '   len);
        this.value = this.value.substr(0, len);
        return false;
    }
}
अंत में, हम इस कॉलबैक फ़ंक्शन को टेक्स्ट क्षेत्र के कीअप और ब्लर इवेंट दोनों से जोड़ते हैं।
txts[i].onkeyup = func;
txts[i].onblur = func;
यह व्यापक दृष्टिकोण दोहराए जाने वाले ईवेंट हैंडलिंग की आवश्यकता के बिना वेब पेज पर सभी योग्य टेक्स्ट क्षेत्रों पर स्वचालित रूप से अधिकतम लंबाई लगाने के लिए एक सहज समाधान प्रदान करता है।