วิธีปิดการใช้งานการเลือกข้อความด้วย CSS

เรียนรู้วิธีปิดใช้งานการเลือกข้อความโดยใช้ user-select คุณสมบัติ CSS.

โดยค่าเริ่มต้น เว็บเบราว์เซอร์จะให้คุณเลือกข้อความบนเว็บไซต์ใดก็ได้ ตราบใดที่ข้อความนั้นเป็น ของจริง องค์ประกอบข้อความและไม่ใช่รูปภาพที่มีข้อความ

คุณสามารถเลือกข้อความได้โดยใช้เมาส์หรือแป้นพิมพ์ เช่น cmd + a (Mac) หรือ ctrl + a (Windows)

แต่ถ้าคุณไม่ต้องการอนุญาตให้เลือกข้อความ (ด้วยเหตุผลใดก็ตาม) จะเกิดอะไรขึ้น

คุณใช้คุณสมบัติ CSS user-select และให้ค่า none :

selector {
  user-select: "none";
}

สมมติว่าคุณต้องการปิดใช้งานการเลือกข้อความในทุกองค์ประกอบที่มีคลาสชื่อ .select-none :

.select-none {
  user-select: "none";
}

จากนั้นคุณเพิ่มคลาสนั้นไปยังองค์ประกอบใดๆ ที่คุณต้องการปิดใช้งานการเลือกข้อความบน:

<p class="select-none">This text cannot be selected.</p>

สาธิต:

ไม่สามารถเลือกองค์ประกอบข้อความนี้ ลองด้วยตัวคุณเอง!

หมายเหตุ:คุณต้องใช้คำนำหน้าเบราว์เซอร์เหล่านี้สำหรับ user-select คุณสมบัติเพื่อให้ทำงานได้ในทุกเบราว์เซอร์:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;