Thuộc tính userSelect của HTML DOM Style

Thuộc tính style.userSelect trong HTML DOM kiểm soát việc người dùng có thể chọn (highlight) văn bản của một phần tử hay không. Đây là tính năng hữu ích cho việc bảo vệ nội dung hoặc cải thiện trải nghiệm người dùng trên các giao diện tùy chỉnh.

Cú pháp

Lấy giá trị userSelect

object.style.userSelect

Thiết lập giá trị userSelect

object.style.userSelect = "giá_trị"

Các giá trị hợp lệ

Ví dụ minh họa

Ví dụ dưới đây vô hiệu hóa việc chọn văn bản trên đoạn văn khi nhấn nút:

<!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>Ví dụ thuộc tính DOM Style userSelect</h1>
<p style="direction:ltr">Đây là đoạn văn bản với một số nội dung giả.</p>
<button onclick="voHieuHoaChon()" class="btn">Vô hiệu hóa chọn văn bản</button>
<div class="show"></div>
<script>
  function voHieuHoaChon() {
    document.querySelector('p').style.userSelect = "none";
    document.querySelector('.show').innerHTML = "Bây giờ bạn không thể chọn đoạn văn bản trên";
  }
</script>
</body>
</html>

Kết quả

Sau khi nhấn nút, người dùng sẽ không thể highlight hoặc copy văn bản trong đoạn <p>.

Lưu ý: Thuộc tính này không được hỗ trợ trên IE/Edge cũ. Cần thêm tiền tố -webkit-user-select, -moz-user-select, -ms-user-select để tương thích đa trình duyệt.