Có cách nào để làm cho DIV không được chọn không?

Đây là một câu hỏi CSS thú vị dành cho bạn!

Tôi có một textarea với nền trong suốt phủ lên một số văn bản mà tôi muốn sử dụng như một hình mờ. Các văn bản lớn và chiếm phần lớn của văn bản. Nó trông đẹp, vấn đề là khi người dùng nhấp vào textarea, đôi khi nó chọn văn bản hình mờ thay thế. Tôi muốn văn bản watermark không bao giờ được lựa chọn. Tôi đã mong đợi nếu một cái gì đó thấp hơn trong chỉ mục z thì nó sẽ không thể chọn được nhưng các trình duyệt dường như không quan tâm đến các lớp chỉ mục z khi chọn các mục. Có một mẹo hoặc cách để làm cho nó để DIV này không bao giờ được lựa chọn?

Tôi đã viết một phần mở rộng jQuery đơn giản để vô hiệu hóa lựa chọn một thời gian trước: Vô hiệu hóa lựa chọn trong jQuery . Bạn có thể gọi nó thông qua$('.button').disableSelection();

Cách khác, sử dụng CSS (trình duyệt chéo):

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

Mã CSS sau hoạt động gần như trình duyệt hiện đại:

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

Đối với IE, bạn phải sử dụng JS hoặc chèn thuộc tính trong thẻ html.

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

Chỉ cần cập nhật câu trả lời gốc, được đánh giá cao của aleemb với một vài bổ sung cho css.

Chúng tôi đã sử dụng kết hợp sau:

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

Chúng tôi đã nhận được đề xuất để thêm mục nhập liên lạc webkit từ:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

Tháng 4 năm 2015: Chỉ cần cập nhật câu trả lời của riêng tôi với một biến thể có thể có ích. Nếu bạn cần làm cho DIV có thể chọn / không chọn được khi đang di chuyển và sẵn sàng sử dụng Modernizr , các thao tác sau đây hoạt động gọn gàng trong javascript:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

Như Johannes đã đề xuất, một hình ảnh nền có lẽ là cách tốt nhất để đạt được điều này chỉ bằng CSS.

Một giải pháp JavaScript cũng sẽ phải ảnh hưởng đến "dragstart" để có hiệu quả trên tất cả các trình duyệt phổ biến.

JavaScript:

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

Giàu có

Bạn có thể sử dụng pointer-events: none;trong CSS của mình

div {
  pointer-events: none;
}

bạn có thể thử điều này:

<div onselectstart="return false">your text</div>

Sẽ không phải là một hình ảnh nền đơn giản cho đủ văn bản?

Các trình duyệt WebKit (ví dụ Google Chrome và Safari) có giải pháp CSS tương tự như -moz-user-select của Mozilla: none

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

Ngoài ra trong iOS nếu bạn muốn loại bỏ các lớp phủ bán trong suốt màu xám xuất hiện ontouch, hãy thêm css:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

Sử dụng

onselectstart = "return false"

nó ngăn chặn việc sao chép nội dung của bạn.

Đảm bảo rằng bạn đặt vị trí rõ ràng là tuyệt đối hoặc tương đối để chỉ mục z hoạt động để lựa chọn. Tôi đã có một vấn đề tương tự và điều này đã giải quyết nó cho tôi.

Không chắc chắn về trường hợp sử dụng của bạn, nhưng bạn có thể làm cho nó có thể kéo được.