ป้องกันไม่ให้ภาพถูกลากหรือเลือกใน HTML โดยไม่ใช้ JS

เพิ่มโค้ดสนิปเพ็ตต่อไปนี้ในคุณสมบัติของภาพ เพื่อป้องกันไม่ให้ภาพถูกลากและเลือก:

img {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

เมื่อดับเบิลคลิกที่ข้อความหรือภาพ จะถูกไฮไลท์ (เลือก) คุณสมบัติ user-select สามารถใช้ป้องกันได้ โดยตั้งค่าเป็น none เราสามารถป้องกันไม่ให้ภาพถูกเลือก (ไฮไลท์)

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อป้องกันไม่ให้ภาพถูกเลือก:

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        -drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
      }
    </style>
  </head>
  <body>
    <img src="https://www.tutorialspoint.com/images/python3.png" alt="Python" width="62" height="62">
  </body>
</html>