คุณสมบัติ HTML DOM Style userSelect

คุณสมบัติ style.userSelect ของ HTML DOM ใช้สำหรับควบคุมว่าผู้ใช้สามารถเลือก (highlight) ข้อความขององค์ประกอบได้หรือไม่

ไวยากรณ์ (Syntax)

การดึงค่า userSelect

object.style.userSelect

การกำหนดค่า userSelect

object.style.userSelect = "value"

ค่าที่เป็นไปได้ (Values)

ตัวอย่างการใช้งาน

ตัวอย่างแสดงการปิดการเลือกข้อความของพารากราฟเมื่อคลิกปุ่ม

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    color: #000;
    background: lightblue;
    height: 100vh;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem 0;
  }
  .show {
    margin: 1rem 0;
  }
</style>
</head>
<body>
<h1>ตัวอย่าง DOM Style userSelect Property</h1>
<p style="direction:ltr">นี่คือพารากราฟที่มีข้อความตัวอย่าง</p>
<button onclick="add()" class="btn">ตั้งค่า userSelect</button>
<div class="show"></div>
<script>
  function add() {
    document.querySelector('p').style.userSelect = "none";
    document.querySelector('.show').innerHTML = "ตอนนี้คุณไม่สามารถเลือกข้อความพารากราฟข้างบนได้";
  }
</script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม - สามารถเลือกข้อความได้ตามปกติ

หลังคลิกปุ่ม "ตั้งค่า userSelect" - ไม่สามารถไฮไลท์หรือคัดลอกข้อความพารากราฟได้

การประยุกต์ใช้: เหมาะสำหรับป้องกันการคัดลอกเนื้อหา ปุ่ม UI ที่ไม่ควรถูกเลือก หรือองค์ประกอบที่ต้องการปฏิสัมพันธ์เฉพาะเจาะจง