Javascript Html Css Textarea Prototypejs

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

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

المشكلة

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

المتطلبات

  • تغيير الحجم الرأسي: يجب أن تتوسع منطقة النص عموديًا كلما أدخل المستخدم المزيد من أسطر النص.
  • عرض ثابت: يجب أن يكون العرض ثابتًا، ولكن ليس بؤرة مقارنة بتغيير الحجم الرأسي.

الحل

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

الخطوة 1: إعداد HTML الخاص بك

أولاً، ستحتاج إلى الهيكل الأساسي لـ HTML لمنطقة النص الخاصة بك. هنا تطبيق بسيط:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script language="javascript">
            google.load('prototype', '1.6.0.2');
        </script>
    </head>
    <body>
        <textarea id="text-area" rows="1" cols="50"></textarea>
    </body>
</html>

الخطوة 2: كتابة دالة جافا سكريبت

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

  1. الحصول على القيمة الحالية لمنطقة النص.
  2. تقسيم النص إلى أسطر بناءً على أحرف الأسطر الجديدة.
  3. حساب عدد الأسطر بناءً على عرض منطقة النص.
  4. تعيين خاصية rows وفقًا لذلك.

إليك الشيفرة:

<script type="text/javascript" language="javascript">
    resizeIt = function() {
        var str = $('text-area').value;
        var cols = $('text-area').cols;

        var linecount = 0;
        $A(str.split("\n")).each(function(l) {
            linecount += Math.ceil(l.length / cols); // اعتبر الأسطر الطويلة أيضًا
        })
        $('text-area').rows = linecount + 1; // زيادة عدد الأسطر
    };

    // ربط الدالة بحدث الضغط على زر
    Event.observe('text-area', 'keydown', resizeIt);
    
    resizeIt(); // استدعاء الدالة مرة واحدة للت initializing
</script>

الخطوة 3: التهيئة

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

الاختبار والتعديلات

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

الأفكار النهائية

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

لا تتردد في التواصل إذا كان لديك أسئلة إضافية أو إذا كنت ترغب في مشاركة تعديلاتك الخاصة على هذا الحل!