تحسين تفاعل المستخدم: تغيير لون حدود حقول الإدخال عند الكتابة
في البداية، يبدو أنك تقوم بتحكيم تصميم نموذج الإدخال في صفحتك الويب، وتحديداً تغيير لون حدود الإدخال عند كتابة نص فيه. لحل هذا، يمكنك الاستفادة من لغة البرمجة CSS ولغة البرمجة JavaScript لتحقيق هذا التأثير المرغوب.
لنقم أولاً بتعديل رمز CSS الخاص بك ليبدو كالتالي:
html<head>
<style>
.input {
border: 5px solid red;
}
.input:focus {
border: 5px solid black;
}
style>
head>
في هذا الرمز، قمت بإضافة قاعدة جديدة .input:focus، حيث سيتم تطبيقها عندما يتم التركيز على الحقل النصي (input). وعندما يتم التركيز، ستتغير حدود الإدخال إلى اللون الأسود.
لكن، من الناحية الفنية، تغيير لون الحدود عندما يتم الكتابة داخل الحقل النصي يتطلب استخدام لغة البرمجة JavaScript. يمكنك استخدام الأحداث المتاحة مثل oninput لتحقيق ذلك. إليك مثال على كيفية تحقيق ذلك:
html<head>
<style>
.input {
border: 5px solid red;
}
.input:focus,
.input.not-empty {
border: 5px solid black;
}
style>
<script>
document.addEventListener("DOMContentLoaded", function () {
var inputElement = document.querySelector(".input");
inputElement.addEventListener("input", function () {
if (inputElement.value.trim() !== "") {
inputElement.classList.add("not-empty");
} else {
inputElement.classList.remove("not-empty");
}
});
});
script>
head>
في هذا المثال، أضفت الفئة .not-empty إلى القاعدة في CSS، واستخدمت JavaScript لتحقيق تبديل الفئة على أساس ما إذا كان الحقل النصي فارغًا أو لا.
المزيد من المعلومات
بالطبع، سنواصل توسيع المعلومات حول كيفية تحقيق تغيير لون حدود الإدخال عند كتابة نص داخله.
لتوضيح الأمور أكثر، الشيفرة البرمجية السابقة تستخدم تقنية تسمى “تفعيل التأثير” (Pseudo-class) في CSS. يتمثل هذا في استهداف حالات معينة تحدث في عنصر HTML، وتطبيق تأثير معين عند حدوث هذه الحالات.
في السياق الحالي:
.input:focusتعني أنه عندما يكون الحقل نصياً (input) محددًا (في حالة التركيز)، سيتم تطبيق حدود سوداء عليه..input.not-emptyتعني أنه عندما يحتوي الحقل النصي على نص (لا يكون فارغًا)، سيتم تطبيق حدود سوداء عليه.
باستخدام الحدث “input” في JavaScript، يتم التحقق مما إذا كان الحقل النصي فارغًا أم لا، وبناءً على ذلك، يتم إضافة أو إزالة الفئة .not-empty من العنصر. وعندما يكون الحقل فارغًا، يتم إزالة الحدود السوداء، وعندما يحتوي على نص، يتم إضافتها.
هذا النهج يمكن أن يساعد في تعزيز تفاعلية وتجربة المستخدم عند استخدام نماذج الإدخال على صفحتك الويب. تأكد من تضمين هذا الكود في جزء الرأس (head) الخاص بصفحتك، وقد ترى تحسيناً في تفاعل المستخدم مع حقول الإدخال.
