تنفيذ تغيير الحجم التلقائي لمنطقة النص باستخدام النموذج الأولي

لتحسين تجربة المستخدم في تطبيق المبيعات الداخلي الخاص بك، فكر في إضافة وظيفة تغيير الحجم التلقائي إلى منطقة النص المستخدمة لعنوان التسليم. فيما يلي دليل تفصيلي لتحقيق ذلك:

الهدف هو إنشاء منطقة نصية تضبط ارتفاعها ديناميكيًا لاستيعاب إدخال النص، مما يضمن الاستخدام الأمثل للمساحة وسهولة القراءة. وللقيام بذلك، سنستفيد من Prototype، وهو إطار عمل JavaScript.

أولاً، أضف كود JavaScript الضروري إلى صفحتك:

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;
};

يحسب هذا الرمز عدد أسطر النص في منطقة النص بناءً على عدد الأحرف وعرض العمود وفواصل الأسطر. يتم تعيين القيمة الناتجة إلى خاصية "الصفوف" لمنطقة النص، مما يؤدي إلى تغيير حجمها بشكل فعال.

لتنشيط تغيير الحجم التلقائي، قم بإرفاق وظيفة تغيير الحجم بالحدث المناسب. على سبيل المثال، يمكنك استخدام keyup لالتقاط تغييرات إدخال النص:

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

عندما يتم تحميل منطقة النص لأول مرة، قم باستدعاء الدالة resizeIt لتهيئة الارتفاع:

resizeIt();

باستخدام هذا التنفيذ، ستقوم منطقة النص تلقائيًا بضبط ارتفاعها حسب المستخدم الأنواع، وتحسين المساحة الرأسية للنموذج وضمان تقديم معلومات العنوان بطريقة قابلة للقراءة.