HTML غير مفيد

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

سأقوم بتنفيذ هذه الوظيفة باستخدام Go وa-h/Templ وTailwind وAlpine.js المفضل لدي لتسهيل الحياة.

إضافة الهيكل العظمي

نبدأ بكتابة قالب أساسي لصندوق الأعداد الصحيحة الخاص بنا:

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  ...
}

نحدد IntInterval على النحو التالي:

type IntInterval struct {
  A, B int
}

مع الفاصل الزمني، سوف نقوم بتعيين الحد الأدنى والحد الأقصى للإدخال. نظرًا لأننا نصنع صندوقًا دوارًا لعدد صحيح، فسيتم دائمًا تعيين الخطوة على "1".

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
}

إضافة CSS

لنبدأ الآن بإضافة بعض الفئتين، فيما يلي بعض الخصائص الخاصة والعناصر الزائفة التي تتحكم في عرض الإدخال.
حدد-لا شيء [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none]

يتم استخدام الفئات الإضافية التالية لإزالة أزرار الدوار الافتراضية:
[&::-زر دوران داخلي لـwebkit]:[-مظهر webkit: لا شيء] [&::-زر دوران خارجي لـwebkit]:[-مظهر webkit: لا شيء] [-moz-appearance: حقل نصي

أخيرًا، دعونا نضيف بعض الحشوات الأساسية والخاتم والألوان وما إلى ذلك...
كتلة w-كاملة مدورة-l-md py-2 px-2.5 نص-رمادي-900 حلقة-1 حلقة داخلية حلقة-رمادي-300 عنصر نائب: نص-رمادي-400 التركيز: مخطط تفصيلي-لا شيء التركيز: حلقة-2 التركيز: حلقة-أساسي-400 بي جي-رمادي-50 سم:نص-سم سم:البادئة-6

بإضافته إلى القالب الخاص بنا، نحصل على ما يلي:

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
}

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

تنفيذ الفلتر

الفكرة الأساسية لصندوق تدوير الأعداد الصحيحة هي المدخلات التي تقبل فقط الأعداد الصحيحة. لقد حاولت في البداية تنفيذ هذه الوظيفة باستخدام سمة نمط HTML كما يلي:

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

حدث "oninput".

في كل مرة يضغط فيها المستخدم على أي مفتاح داخل مربع الإدخال، يتم إنشاء حدث oninput. التقط هذا الحدث باستخدام بناء جملة Alpine x-on:input وقم بتصحيح القيمة وفقًا لعنصر الإدخال. لنقم بإنشاء div أصلي بمجموعة سمات بيانات x، وإضافة دالة تسمح لنا بالتحقق مما إذا كان الإدخال رقمًا على الإطلاق... وبعد ذلك يمكننا تقريب القيمة وفقًا لذلك.

بالنسبة لأولئك الذين لا يعرفون جبال الألب، يتم استخدام $el هنا للإشارة إلى عنصر DOM الحالي.

المغازل المخصصة

في القسم الأصلي الذي تم إنشاؤه سابقًا، أضفنا الفئة التالية = "flex" وأضفنا سمة x-ref = "spinbox" إلى الإدخال حتى تتمكن أزرارنا من تعديل حالتها من خلال الخاصية السحرية $refs.spinbox:

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

  

    
    -
    
     
  

هنا، نستخدم flex-col-reverse كطريقة سهلة للحفاظ على ترتيب علامات التبويب بشكل صحيح، يجب أن تنتقل أولاً إلى '-'، ثم ' '.

نقوم بعد ذلك بإضافة معالجات الأحداث إلى الأزرار باستخدام x-on:click، الكود الكامل (باستثناء CSS) هو كما يلي:

  

    
    -
    
     
  

علينا تحويل e.value وe.step قبل إجراء أي عملية حسابية لأن هذه عبارة عن سلاسل.

عندما يتعلق الأمر بـ CSS للأزرار الدوارة، فقد تم تصميمها بشكل مشابه جدًا للإدخال، الكود الكامل أدناه.

القالب النهائي

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
  

    @InputLabel(name, label   " "   interval.toString(), tooltip)

    

          
          -
          
           
        
    
  
}

يتمتع :)

يعمل على

• موزيلا فايرفوكس 130.0 (64 بت)
• الإصدار 128.0.6613.120 (الإصدار الرسمي) (64 بت)