इनपुट फ़ील्ड की चौड़ाई को उसके इनपुट में गतिशील रूप से समायोजित करें

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

दुर्भाग्य से, सीएसएस की न्यूनतम-चौड़ाई संपत्ति का उपयोग करके न्यूनतम चौड़ाई निर्धारित करना काम नहीं करता है इनपुट फ़ील्ड. हालाँकि, आधुनिक ब्राउज़र "ch" (वर्ण चौड़ाई) नामक एक वैकल्पिक इकाई प्रदान करते हैं, जो फ़ॉन्ट-स्वतंत्र है और किसी भी फ़ॉन्ट में वर्ण "0" की चौड़ाई के बराबर है।

एक गतिशील इनपुट फ़ील्ड चौड़ाई बनाने के लिए, हम निम्नलिखित जावास्क्रिप्ट कोड का उपयोग कर सकते हैं:

var input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input); // Immediately call the function

function resizeInput() {
  this.style.width = this.value.length   "ch";
}

यह कोड एक आकार बदलने वाले फ़ंक्शन को इनपुट इवेंट से जोड़ता है, जो इनपुट फ़ील्ड की चौड़ाई को सीएच इकाइयों में इसकी टेक्स्ट लंबाई के बराबर अपडेट करता है। इसके अतिरिक्त, हम CSS में इनपुट फ़ील्ड स्टाइल को इस प्रकार परिभाषित कर सकते हैं:

input{ font-size:1.3em; padding:.5em; }

यह एक गतिशील रूप से समायोज्य इनपुट फ़ील्ड चौड़ाई के कार्यान्वयन को पूरा करता है जो इसकी सामग्री के आधार पर स्वचालित रूप से विस्तार या अनुबंध करता है।