Cách cho phép/ngăn chặn chọn văn bản (userSelect) bằng JavaScript

Thuộc tính userSelect (và tiền tố WebkitUserSelect, MozUserSelect, msUserSelect) kiểm soát việc người dùng có thể chọn (highlight) văn bản hay không. Giá trị none vô hiệu hóa chọn, auto (mặc định) cho phép, text chỉ cho chọn văn bản, all chọn toàn bộ bằng một click.

Ví dụ minh họa

Mã sau vô hiệu hóa chọn văn bản trong div khi nhấn nút (hỗ trợ cross-browser):

<!DOCTYPE html>
<html>
<body>
  <button onclick="disableSelect()">Vô hiệu hóa chọn văn bản</button>
  <div id="box">
    Nhấn nút trên. Sau đó bạn sẽ KHÔNG THỂ chọn văn bản này.
    Minh họa thuộc tính userSelect property.
  </div>
  <script>
    function disableSelect() {
      const el = document.getElementById("box");
      // Chuẩn hiện đại
      el.style.userSelect = "none";
      // Safari/Chrome cũ
      el.style.WebkitUserSelect = "none";
      // Firefox cũ
      el.style.MozUserSelect = "none";
      // IE/Edge cũ
      el.style.msUserSelect = "none";
    }
  </script>
</body>
</html>

Các giá trị của userSelect

Giá trị	Mô tả
`auto`	Mặc định: trình duyệt quyết định (thường cho chọn)
`none`	Ngăn chọn văn bản hoàn toàn
`text`	Chỉ cho chọn văn bản (không chọn phần tử)
`all`	Click một lần chọn toàn bộ nội dung phần tử
`contain`	Chọn bị giới hạn trong ranh giới phần tử

Lưu ý

Không bảo mật: userSelect chỉ ngăn UI chọn, người dùng vẫn có thể xem source, copy qua devtools, hoặc tắt CSS.
Truy cập: Vô hiệu hóa chọn có thể gây khó khăn cho người dùng (copy mã, tra từ điển...). Cân nhắc kỹ.
Tiền tố: Trình duyệt hiện đại (Chrome 54+, Firefox 69+, Safari 13+, Edge 79+) hỗ trợ userSelect chuẩn. Giữ tiền tố cho phiên bản cũ.