مخيفًا جدًا من مدخلات HTML. الشكاوى حول هذه المدخلات عديدة.

مشاكل في إدخال الأرقام

• عدم الاتساق. تتعامل معها المتصفحات المختلفة بشكل مختلف. يمكنك إدخال الأرقام فقط في المتصفحات المستندة إلى Chromium. لكن يمكنك إدخال أي رمز في Firefox وSafari، على الرغم من أنهم سيظهرون رسالة خطأ منبثقة.

• تعقيد. الأرقام الصالحة ليست مجرد أرقام. يسمح إدخال الأرقام بقيم السالبة (-100) و النقطة العائمة (0.01)، بالإضافة إلى التدوين العلمي (-2.3e4). وهو أمر مفيد في بعض الأحيان، ولكن ليس في كل مرة.

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

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

ميزات الإدخال الرقمي

• التحقق من صحة إدخالات المستخدم في جميع المتصفحات الحديثة باستمرار.

• تعيين العلامة العشرية

  وضع الإدخال للوحات المفاتيح التي تظهر على الشاشة.

• يمكن الزيادة والتناقص عند الضغط على المفاتيح لأعلى أو لأسفل.

ضبط سمات الإدخال

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

الأنماط المتاحة

• (?:0|[1-9]\d*) - السماح بالأرقام فقط، 1234567890

• [ \-]?(?:0|[1-9]\d*) - السماح بالأعداد الصحيحة الموجبة والسالبة، على سبيل المثال 1، -2، 3

• [ \-]?(?:0|[1-9]\d*)(?:\.\d )? - السماح بالأعداد الصحيحة العائمة، على سبيل المثال. 1.001، -123.9

• [ \-]?(?:0|[1-9]\d*)(?:\.\d )?(?:[eE][ \-]?\d )? - السماح بالترميز العلمي، على سبيل المثال. -1.314e12

إليك الشكل الذي يجب أن يبدو عليه HTML الآن.

inputMode="decimal" يضبط لوحة المفاتيح المناسبة للأجهزة التي تعمل باللمس.

autoComplete="off" مطلوب لتعطيل الإكمال التلقائي المزعج للمتصفح، وعادة ما تكون هذه الوظيفة مطلوبة للمدخلات الشبيهة بالاسم.

رد فعل واجهة المكون

// قائمة الأوضاع الرقمية المتاحة أوضاع التعداد { طبيعي = "طبيعي" ، عدد صحيح = "عدد صحيح"، العائمة = "العائمة"، علمي = "علمي" ، } اكتب القيمة = سلسلة؛ دعائم نوع التصدير = { /** تعيين القيمة المتحكم بها */ القيمة؟: القيمة؛ /** توفير رد اتصال لالتقاط التغييرات */ onChange?: (value?: Value) => void; /** * تحديد رقم لزيادة أو تقليل قيمة الإدخال * عندما ينقر المستخدم على مفاتيح الأسهم */ الخطوة؟: رقم؛ /** تعيين الحد الأقصى للقيمة المتاحة لحركة السهم */ الحد الأقصى؟: رقم؛ /** قم بتعيين الحد الأدنى لقيمة حركة السهم */ دقيقة؟: رقم؛ /** حدد وضع الإدخال الرقمي */ الوضع؟: مفتاح نوع الأوضاع؛ }; تصدير قيمة الإدخال الرقمي: FC = ({ قيمة، الخطوة = 1، الحد الأقصى = إنفينيتي، دقيقة = -إنفينيتي، onChange = () => {}، الوضع = الأوضاع.العلمية، }) => { //... }

نحن الآن بحاجة إلى إدارة سمة النمط وفقًا لإعدادات الوضع.

رسم نمط ثابت = { [Modes.natural]: '(?:0|[1-9]\\d*)', [Modes.integer]: '[ \\-]?(?:0|[1-9]\\d*)', [Modes.floating]: '[ \\-]?(?:0|[1-9]\\d*)(?:\\.\\d )?', [Modes.scientific]: '[ \\-]?(?:0|[1-9]\\d*)(?:\\.\\d )?(?:[eE][ \\-] ?\\d )?', }; نمط ثابت = PatternMapping[mode];

التعامل مع ضغطات المفاتيح

إليك كيفية التعامل مع ضغطات مفاتيح الأسهم.

const HandleKeyDown = useCallback( (الحدث: KeyboardEvent) => { const inputValue = (event.target as HTMLInputElement).value; // التعامل مع الزيادة إذا (event.key === 'ArrowUp') { // يجب تسوية قيمة الإدخال الفارغة إلى الصفر const nextValue = Number(inputValue || 0) step; إذا (القيمة التالية = دقيقة) { onChange(nextValue.toString()); } } }, [الحد الأقصى، الحد الأدنى، onChange، الخطوة] );

التحقق من صحة إدخال المستخدم

سنقوم بإبلاغ المستخدم بانتهاكات تنسيق الأرقام المتوقعة عبر لون حدود الإدخال وتلميح الخيار أسفل الإدخال.

سنستخدم Tailwind CSS لإنشاء هذا التصميم ووظيفة الإبلاغ عن الأخطاء.

اسم فئة النظير ضروري لإنشاء محدد CSS لرسالة خطأ الإدخال أدناه. غير صالح: اسم الفئة border-red-600 يرسم الحدود باللون الأحمر عندما يكون الإدخال غير صالح.

فئة غير مرئية تحدد الرؤية: مخفية لرسالة التلميح بشكل افتراضي. يتم إلغاء تغليف الفئة Peer-[:invalid]:visible للمحدد التالي .peer:invalid ~ .peer-\[\:invalid\]\:visible مما يجعل التلميح مرئيًا عندما يسبقه الإدخال.peer في الحالة: غير صالحة.

تصدير الإدخال الرقمي الثابت: FC = () => { معرف ثابت = useId(); يعود ( الإدخال الرقمي التسمية>

يرجى تقديم رقم عشري صالح

فيلدسيت> ); }

إليك رمز الإدخال الرقمي الكامل:

تعليمات سعيدة!