प्रोटोटाइप के साथ टेक्स्टएरिया का स्वत: आकार बदलना

अपने आंतरिक बिक्री एप्लिकेशन में उपयोगकर्ता अनुभव को बढ़ाने के लिए, ऑटो-आकार बदलने की कार्यक्षमता को जोड़ने पर विचार करें डिलीवरी पते के लिए textarea का उपयोग किया जाता है। इसे प्राप्त करने के लिए यहां एक विस्तृत मार्गदर्शिका दी गई है:

लक्ष्य एक टेक्स्ट क्षेत्र बनाना है जो टेक्स्ट इनपुट को समायोजित करने के लिए अपनी ऊंचाई को गतिशील रूप से समायोजित करता है, जिससे इष्टतम स्थान उपयोग और पठनीयता सुनिश्चित होती है। ऐसा करने के लिए, हम प्रोटोटाइप, एक जावास्क्रिप्ट फ्रेमवर्क का लाभ उठाएंगे।

सबसे पहले, अपने पेज पर आवश्यक जावास्क्रिप्ट कोड जोड़ें:

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount  = 1   Math.floor(l.length / cols); // Consider long lines
  })

  $('iso_address').rows = linecount;
};

यह कोड वर्ण गणना, कॉलम चौड़ाई और लाइन ब्रेक के आधार पर टेक्स्ट क्षेत्र में टेक्स्ट की पंक्तियों की संख्या की गणना करता है। परिणामी मान टेक्स्ट क्षेत्र की "पंक्तियों" संपत्ति को सौंपा गया है, प्रभावी रूप से इसका आकार बदल रहा है।

ऑटो-आकार बदलने को सक्रिय करने के लिए, resizeIt फ़ंक्शन को एक उपयुक्त ईवेंट में संलग्न करें। उदाहरण के लिए, आप टेक्स्ट इनपुट परिवर्तनों को कैप्चर करने के लिए keyup का उपयोग कर सकते हैं:

Event.observe('iso_address', 'keyup', resizeIt);

जब textarea पहली बार लोड होता है, तो resizeIt फ़ंक्शन को कॉल करें ऊंचाई आरंभ करने के लिए:

resizeIt();

इस कार्यान्वयन के साथ, टेक्स्टएरिया स्वचालित रूप से अपनी ऊंचाई समायोजित कर लेगा जैसे ही उपयोगकर्ता टाइप करता है, फॉर्म के ऊर्ध्वाधर स्थान को अनुकूलित करता है और यह सुनिश्चित करता है कि पते की जानकारी पठनीय तरीके से प्रस्तुत की गई है।