كيفية تقييد أحرف الإدخال باستخدام HTML CSS و JavaScript

ستتعلم اليوم في هذه المدونة كيفية تحديد أحرف الإدخال باستخدام HTML CSS وجافا سكريبت.

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

 

في هذا البرنامج [Limit Input Characters] ، يوجد حقل إدخال على صفحة الويب مع رمز ورقم عداد. يقوم رقم العداد هذا بإعلام المستخدم عن عدد الأحرف التي يمكن إدخالها. في البداية ، يكون حقل الإدخال هذا غير نشط بلون حد رمادي ولكن عندما تركز على حقل الإدخال ، يتغير لون الحد إلى لون آخر مما يعني أن حقل الإدخال نشط الآن.

 

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

 

إذا كنت ترغب في مشاهدة فيديو تعليمي كامل أو تشعر بصعوبة فهم ما أقوله أعلاه ، فيمكنك مشاهدة الفيديو الكامل لهذا البرنامج [Limit Input Characters]

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

 

يمكن أن يكون هذا ممكنًا فقط باستخدام السمة المطلوبة في العلامة <input type = ”text”> و: focus &: valid selectors في CSS. في هذا الفيديو ، لقد أظهرت للتو أنك تحد من أحرف الإدخال في الإدخال ولكن باستخدام نفس الرموز ، يمكنك أيضًا القيام بذلك في حقل Textarea.

 

الحد من أحرف الإدخال في JavaScript

لإنشاء هذا البرنامج [Limit Input Characters]. أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق الأكواد التالية في ملفك. يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر الخاصة بأحرف الإدخال المحددة من زر التنزيل أدناه.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow