จะปิดการใช้งานฟิลด์อินพุตโดยใช้ CSS ได้อย่างไร

ในคู่มือนี้ เราจะเข้าใจวิธีปิดการใช้งานช่องใส่ข้อมูลโดยใช้ CSS เริ่มกันเลย!

จะปิดการใช้งานฟิลด์อินพุตโดยใช้ CSS ได้อย่างไร

ใน CSS เหตุการณ์จะถูกปิดใช้งานโดยใช้ ' ตัวชี้เหตุการณ์ ' คุณสมบัติ. ก่อนอื่น ให้เรียนรู้เกี่ยวกับคุณสมบัติ pointer-events

คุณสมบัติ CSS 'ตัวชี้เหตุการณ์' คืออะไร

“ ตัวชี้เหตุการณ์ ” ควบคุมวิธีที่องค์ประกอบ HTML ตอบสนองหรือทำงานต่อเหตุการณ์การสัมผัส เช่น เหตุการณ์คลิกหรือแตะ สถานะใช้งานหรือวางเมาส์เหนือ และดูว่าเคอร์เซอร์สามารถมองเห็นได้หรือไม่

ไวยากรณ์
ไวยากรณ์ของ pointer-events มีดังต่อไปนี้:

คุณสมบัติการกล่าวถึงข้างต้นใช้ค่าสองค่า เช่น “ รถยนต์ ' และ ' ไม่มี ”:

• อัตโนมัติ: มันถูกใช้เพื่อดำเนินการเหตุการณ์เริ่มต้น
• ไม่มี: มันถูกใช้เพื่อปิดการใช้งานเหตุการณ์

มุ่งหน้าไปยังตัวอย่างที่กำหนด

ตัวอย่างที่ 1: การเพิ่มฟิลด์อินพุตโดยใช้ CSS

ในตัวอย่างนี้ อย่างแรก เราจะสร้าง div และเพิ่มช่องหัวเรื่องและช่องป้อนข้อมูล จากนั้นตั้งค่าประเภทอินพุตเป็น “ ข้อความ ” และตั้งค่าเป็น “ ใส่ชื่อของคุณ ”

HTML

หลังจากนั้น ย้ายไปที่ CSS และจัดรูปแบบ div โดยตั้งค่าสีพื้นหลังเป็น “ rgb(184, 146, 99) ” และส่วนสูงเท่ากับ “ 150px ”

CSS

ผลลัพธ์ของรหัสที่อธิบายข้างต้นได้รับด้านล่าง ที่นี่ เราจะเห็นว่าช่องป้อนข้อมูลของเราทำงานอยู่และกำลังรับข้อมูลจากผู้ใช้:

ตอนนี้ย้ายไปยังส่วนถัดไปที่เราใช้ค่าของ“ ตัวชี้เหตุการณ์ ” คุณสมบัติเป็น “ ไม่มี ”

ตัวอย่างที่ 2: การปิดใช้งานช่องใส่ข้อมูลโดยใช้ CSS

ตอนนี้เราจะใช้ “ ป้อนข้อมูล ” เพื่อเข้าถึง องค์ประกอบที่เพิ่มในไฟล์ HTML และตั้งค่าของตัวชี้เหตุการณ์เป็น “ ไม่มี ”:

เมื่อคุณใช้คุณสมบัติดังกล่าวข้างต้น “ ตัวชี้เหตุการณ์ ' กับ ' ไม่มี ” ค่าข้อความของช่องป้อนข้อมูลจะไม่สามารถแก้ไขได้ซึ่งบ่งชี้ว่าช่องป้อนข้อมูลของเราถูกปิดใช้งาน:

แค่นั้นแหละ! เราได้อธิบายวิธีการปิดการใช้งานช่องใส่ข้อมูลโดยใช้ CSS

บทสรุป

ในการปิดใช้งานช่องป้อนข้อมูลใน HTML ' ตัวชี้เหตุการณ์ ” ใช้คุณสมบัติของ CSS ในการดำเนินการดังกล่าว ให้เพิ่มช่องป้อนข้อมูล และตั้งค่าของเหตุการณ์ตัวชี้เป็น “ ไม่มี ” เพื่อปิดการใช้งานช่องใส่ ในคู่มือนี้ เราจะอธิบายวิธีการปิดการใช้งานช่องใส่ข้อมูลโดยใช้ CSS และให้ตัวอย่าง