Làm sao để thẻ DIV trở thành unselectable?

Đôi khi vì nhu cầu, chúng ta cần làm cho các thẻ DIV trên trang web của mình không thể bôi đen hoặc chọn được. Nhiều người tò mò về việc làm thế nào làm được chuyện này. Thực ra phương pháp rất đơn giản, nhưng trước hết, tôi xin đề cập đến chuyện "Tại sao chúng ta cần việc này?"

Có 2 lý do chính:

1. Vì ứng dụng cần như thế. Ví dụ bạn viết một cái game, và không muốn trình duyệt bôi đen khi người dùng nhấp đôi chuột hoặc Ctrl-A.
2. Vì không muốn để người khác dễ dàng copy.

Tôi xin đề cập đến cách làm cho mục đích thứ nhất.

Bạn có 2 cách:

1. Sử dụng CSS
2. Sử dụng JS để chặn bôi đen.

CSS:

.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Khi đó, thẻ DIV sẽ là dạng:

<div id="foo" unselectable="on" class="unselectable">...</div>

Bạn phải thêm đoạn unselectable vào thẻ DIV để IE hiểu đúng.

Còn cách dùng JS:

function disableSelection(target){

    if (typeof target.onselectstart!="undefined") //IE route
        target.onselectstart=function(){return false}

    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
        target.style.MozUserSelect="none"

    else //All other route (ie: Opera)
        target.onmousedown=function(){return false}

    target.style.cursor = "default"
}



//Sample usages
disableSelection(document.body) //Disable text selection on entire body
disableSelection(document.getElementById("foo")) //Disable text selection on element with id="mydiv"

Ý tưởng dựa trên việc override lại các hàm select của JS, làm cho hàm này không chạy được.

Liệu các phương pháp này có triệt để?

Câu trả lời là KHÔNG nếu bạn hướng tới mục tiêu số 2: không muốn để người khác dễ dàng copy

Đơn giản là bạn không thể làm được điều đó, bạn chỉ có thể hạn chế ở một mức nào đó thôi, và như vậy sẽ làm nản lòng những người muốn copy.

Một số phương pháp "làm nản lòng":

1. Tạo một thẻ DIV bự, phủ toàn màn hình, không thể select (dùng code CSS ở trên), và hoàn toàn transparent. Như vậy, người đọc vẫn đọc được đầy đủ nội dung, nhưng việc copy cần phải inspect element và làm vài thứ mới được.
2. Tách nội dung thành nhiều DIV liền nhau, mỗi DIV lại cho unselectable. Như vậy dù cho có inspect element rồi sửa lại code unselectable, thì việc này cũng ngốn khá nhiều thời gian của người muốn copy.
3. Thêm các dòng watermark với font rất nhỏ. Các dòng watermark nếu đọc trên trang của bạn thì không ai thấy, nhưng khi copy vào tài liệu khác, nó sẽ hiện rõ mồn một.

Hi vọng cái này hữu ích.

Note: Câu trả lời của mình trên stackoverflow: http://stackoverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable/5581996#5581996