แอตทริบิวต์ Style userSelect
- หน้าก่อนหน้า unicodeBidi
- หน้าต่อไป verticalAlign
- กลับไปยังเพจต้นนั้น Object HTML DOM Style
คำอธิบายและการใช้งาน
userSelect การตั้งค่าหรือคืนค่าว่าองค์ประกอบนั้นสามารถเลือกข้อความหรือไม่
หากคุณคลิกทับข้อความบางส่วน ข้อความนั้นจะถูกเลือกหรือปรากฎในแบบเสนอแนะ นี่เป็นคุณสมบัติที่สามารถใช้ป้องกันสถานการณ์นี้ได้
ดูเพิ่มเติม:
คู่มือ CSSแอตทริบิวต์ user-select
ตัวอย่าง
ตัวอย่าง 1
ป้องกันการเลือกข้อความขององค์ประกอบ <div>:
document.getElementById("myDiv").style.userSelect = "none";
ตัวอย่าง 2
เลือกค่าขององค์ประกอบ "user-select" ขององค์ประกอบ:
document.getElementById("demo").style.userSelect;
การใช้งาน
คืนค่าแอตทริบิวต์ userSelect:
object.style.userSelect
ตั้งค่าแอตทริบิวต์ userSelect:
object.style.userSelect = "auto|none|text|all"
ค่าที่ใช้กับแอตทริบิวต์
| ค่า | คำอธิบาย |
|---|---|
| auto | ค่าเริ่มต้น สามารถเลือกข้อความด้วยค่าเริ่มต้นของเว็บเบราเซอร์โดยเริ่มต้น |
| none | ป้องกันการเลือกข้อความ |
| text | ข้อความสามารถถูกเลือกโดยผู้ใช้ |
| all | เลือกข้อความด้วยการคลิกเดียวแทนการคลิกทั้งสองครั้ง |
รายละเอียดเทคนิค
| ค่าเริ่มต้น: | auto |
|---|---|
| ค่าที่คืนค่า: | ข้อความตัวอักษร ที่แสดงว่าข้อความขององค์ประกอบได้รับการเลือกด้วยเท็กซ์ต์หรือไม่ |
| เวอร์ชั่น CSS: | CSS3 |
การสนับสนุนของเว็บเบราเซอร์
ตัวเลขในตารางบอกว่าเวอร์ชั่นแรกที่สนับสนุนคุณสมบัตินี้ทั้งหมด
เลขตามด้วย Webkit หรือ Moz หรือ O กำหนดให้ใช้คำหน้าที่หนึ่งของเวอร์ชั่นเริ่มต้นที่สนับสนุนเพียงแค่ส่วนบนของ CSS ที่สนับสนุนอยู่แล้ว
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 54.0 | 79.0 10.0 มิลิวินาที |
69.0 | 3.1 Webkit | 41.0 |
- หน้าก่อนหน้า unicodeBidi
- หน้าต่อไป verticalAlign
- กลับไปยังเพจต้นนั้น Object HTML DOM Style
