Câu hỏi Làm cách nào để tắt đánh dấu chọn văn bản?


Đối với các neo hoạt động giống như các nút (ví dụ: Câu hỏi, Thẻ, Người dùng, vv ở đầu trang Stack Overflow) hoặc các tab, có cách CSS chuẩn để vô hiệu hóa hiệu ứng làm nổi bật nếu người dùng vô tình chọn văn bản không?

Tôi nhận ra điều này có thể được thực hiện với JavaScript và một chút googling mang lại cho Mozilla chỉ -moz-user-select Tùy chọn.

Có cách nào phù hợp với tiêu chuẩn để thực hiện điều này với CSS hay không, và nếu không, cách tiếp cận "thực hành tốt nhất" là gì?


4360
2018-05-05 20:29


gốc


có thể các yếu tố trong phần tử phù thủy có làm nổi bật vô hiệu hóa, có nổi bật kích hoạt với trong css trong phong cách hoặc thuộc tính lớp? hay nói cách khác, có những giá trị khác cho -webkit-user-select ect. khác hơn là không?
'user-select'- Giá trị: none | văn bản | chuyển đổi | yếu tố | yếu tố | tất cả | thừa kế - w3.org/TR/2000/WD-css3-userint-20000216 - Blowsie
uihacker.blogspot.com/2011/12/… - Enve
Liên quan: stackoverflow.com/questions/16600479/… = cách chỉ cho phép một số yếu tố con được chọn - JK.
Có một lỗi trong một số trình duyệt khi thực hiện "Chọn tất cả" (CTRL + A và CMD + A) vẫn chọn mọi thứ. Điều này có thể được chiến đấu với một màu lựa chọn trong suốt: ::selection { background: transparent; } ::-moz-selection { background: transparent; } - DaAwesomeP


Các câu trả lời:


CẬP NHẬT Tháng 1 năm 2017:

Theo Tôi có thể dùng, các user-select hiện được hỗ trợ trong tất cả các trình duyệt ngoại trừ Internet Explorer 9 và các phiên bản cũ hơn (nhưng thật đáng buồn vẫn cần tiền tố của nhà cung cấp).


Tất cả các biến thể CSS chính xác là:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


Lưu ý rằng đó là một tính năng phi tiêu chuẩn (nghĩa là không phải là một phần của bất kỳ đặc điểm kỹ thuật nào). Nó không được đảm bảo để làm việc ở khắp mọi nơi, và có thể có sự khác biệt trong việc thực hiện giữa các trình duyệt và trong các trình duyệt trong tương lai có thể thả hỗ trợ cho nó.


Có thể tìm thêm thông tin trong Tài liệu về Mạng nhà phát triển Mozilla.


6369
2017-12-05 11:45



tốt đẹp mã molokoloco: D, mặc dù cá nhân tôi sẽ ở lại cũng đi từ việc sử dụng nó, như đôi khi bạn có thể cần các giá trị khác nhau cho các trình duyệt khác nhau, và nó dựa trên JavaScript. Tạo một lớp và thêm nó vào phần tử của bạn hoặc áp dụng css cho kiểu phần tử của bạn trong style-sheet của bạn là bằng chứng bullet khá. - Blowsie
'user-select'- Giá trị: none | văn bản | chuyển đổi | yếu tố | yếu tố | tất cả | thừa kế - w3.org/TR/2000/WD-css3-userint-20000216 - Blowsie
Trên thực tế, người dùng chọn không được triển khai trong Opera. Nó thay thế thuộc tính unselectable của IE. - Tim Down
Đối với một số lý do, điều này một mình không làm việc trong IE8, sau đó tôi đã thêm <div onselectstart="return false;"> để div chính của tôi. - robasta
chuyện này thật vớ vẩn! rất nhiều cách khác nhau để làm điều tương tự. chúng ta hãy tạo một tiêu chuẩn mới cho người dùng lựa chọn. chúng tôi sẽ gọi nó standard-user-select. thì chúng ta sẽ không có những vấn đề này. mặc dù đối với khả năng tương thích ngược, chúng tôi cũng nên bao gồm các tính năng khác. vì vậy bây giờ mã trở thành -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;. ah, tốt hơn nhiều. - Claudiu


Trong hầu hết các trình duyệt, điều này có thể đạt được bằng cách sử dụng các biến thể sở hữu độc quyền trên CSS user-select bất động sản, ban đầu được đề xuất và sau đó bị bỏ rơi trong CSS3 và bây giờ được đề xuất trong Giao diện người dùng CSS cấp 4:

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

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Đối với IE <10 và Opera <15, bạn sẽ cần phải sử dụng unselectable thuộc tính của phần tử bạn muốn không thể chọn. Bạn có thể thiết lập điều này bằng cách sử dụng một thuộc tính trong HTML:

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

Đáng buồn là thuộc tính này không được thừa hưởng, có nghĩa là bạn phải đặt một thuộc tính trong thẻ bắt đầu của mọi phần tử bên trong <div>. Nếu đây là một vấn đề, bạn có thể sử dụng JavaScript để làm điều này một cách đệ quy cho con cháu của một phần tử:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Cập nhật ngày 30 tháng 4 năm 2014: Việc duyệt cây này cần phải được chạy lại bất cứ khi nào phần tử mới được thêm vào cây, nhưng có vẻ như từ nhận xét của @Han rằng có thể tránh điều này bằng cách thêm một mousedown xử lý sự kiện mà bộ unselectable vào mục tiêu của sự kiện. Xem http://jsbin.com/yagekiji/1 để biết chi tiết.


Điều này vẫn không bao gồm tất cả các khả năng. Mặc dù không thể khởi tạo các lựa chọn trong các phần tử không thể chọn được, trong một số trình duyệt (ví dụ như IE và Firefox) vẫn không thể ngăn các lựa chọn bắt đầu trước và kết thúc sau phần tử không thể chọn mà không làm cho toàn bộ tài liệu không thể chọn được.


727
2017-11-13 16:05



bạn nên loại bỏ các * chọn từ ví dụ của bạn, nó thực sự hiệu quả và có thực sự không phải là bất kỳ nhu cầu sử dụng nó trong ví dụ của bạn là có? - Blowsie
@Blowsie: Tôi không nghĩ vậy: thông số CSS 2 nói rằng *.foovà .foo tương đương chính xác (trong trường hợp thứ hai, bộ chọn phổ quát (*) được ngụ ý), do đó, hãy chặn các điều khoản của trình duyệt, tôi không thể thấy rằng bao gồm cả * sẽ làm hại hiệu suất. Đó là một thói quen lâu đời của tôi để bao gồm *, mà ban đầu tôi bắt đầu thực hiện để dễ đọc: nó nêu rõ rằng tác giả có ý định phù hợp với tất cả các yếu tố. - Tim Down
oooh sau khi đọc thêm một số, có vẻ như * là chỉ un-effiecient khi sử dụng nó như là chìa khóa (chọn cao nhất) tức là .unselectable *. Thông tin thêm tại đây code.google.com/speed/page-speed/docs/… - Blowsie
Thay vì sử dụng class = "unselectable", chỉ cần sử dụng bộ chọn thuộc tính [unselectable = "on"] {...} - Chris Calo
@Francisc: Không. Như tôi đã nói với Blowsie trước đó trong các ý kiến, nó làm cho chính xác không có sự khác biệt. - Tim Down


Một giải pháp JavaScript cho IE là

onselectstart="return false;"

165
2018-05-05 20:37



Đừng quên ondragstart! - Mathias Bynens
một điều nữa ở đây. Nếu bạn thêm nó vào cơ thể thì bạn sẽ không thể chọn văn bản bên trong textareas hoặc các trường đầu vào trong IE. Cách tôi đã sửa nó cho IE. body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; } - TheBrain
Điều này có thể được thêm vào như là một thuộc tính sử dụng jQuery - $ ("p"). Attr ("onselectstart", "return false") Đây là phương pháp đáng tin cậy duy nhất cho tôi trong IE8 - Matt
tại sao tôi đã sử dụng javascript khi tôi có nhiều giải pháp css! .. - Abudayah
@Abudayah vì chúng không hoạt động trong các phiên bản cũ của Internet Explorer? Đó là, giống như, toàn bộ điểm của câu trả lời này. - Pekka 웃


Cho đến CSS 3 người dùng chọn tài sản có sẵn, con tắc kètrình duyệt dựa trên hỗ trợ -moz-user-select tài sản bạn đã tìm thấy. WebKit và các trình duyệt dựa trên Blink hỗ trợ -webkit-user-select bất động sản.

Điều này tất nhiên không được hỗ trợ trong các trình duyệt không sử dụng công cụ hiển thị Gecko.

Không có "tiêu chuẩn" tuân thủ cách nhanh chóng và dễ dàng để làm điều đó; sử dụng JavaScript là một tùy chọn.

Câu hỏi thực sự là, tại sao bạn muốn người dùng không thể làm nổi bật và có lẽ sao chép và dán các yếu tố nhất định? Tôi đã không đi qua một lần duy nhất mà tôi muốn không cho phép người dùng làm nổi bật một phần nhất định của trang web của tôi. Một số bạn bè của tôi, sau khi đọc nhiều giờ đọc và viết mã sẽ sử dụng tính năng nổi bật như một cách để nhớ vị trí trên trang của họ hoặc cung cấp điểm đánh dấu để mắt họ biết nơi cần xem tiếp theo.

Nơi duy nhất tôi có thể thấy điều này hữu ích là nếu bạn có các nút cho các biểu mẫu không nên sao chép và dán nếu người dùng sao chép và dán trang web.


159
2018-05-24 21:24



Các nút điều sẽ là động lực chính xác của tôi. - Kriem
Một lý do khác cần thiết là Shift-click để chọn nhiều hàng trong một lưới hoặc bảng. Bạn không muốn đánh dấu văn bản, bạn muốn nó chọn các hàng. - Gordon Tucker
Ngoài ra còn có các vấn đề pháp lý trong đó nội dung của người khác đang được tái xuất bản hợp pháp nhưng một điều khoản trong giấy phép yêu cầu nhà xuất bản web để ngăn không cho dễ dàng sao chép và dán văn bản. Đây là điều khiến tôi phải tìm ra câu hỏi này. Tôi không đồng ý với yêu cầu này nhưng công ty tôi đang ký kết hợp đồng có nghĩa vụ pháp lý phải thực hiện theo cách này. - Craig M
@CraigM Kiểu css không ngăn một người lấy nguồn HTML và sao chép nó. Nếu bạn muốn bảo vệ nội dung của mình, bạn sẽ phải tìm những cách tốt hơn. - Agile Jedi
Ứng dụng web tương tác cao với nhiều thao tác kéo và thả ... làm nổi bật tình cờ là một vấn đề khả năng sử dụng lớn. - Marc Hughes


Nếu bạn muốn tắt lựa chọn văn bản trên mọi thứ ngoại trừ <p> các yếu tố, bạn có thể làm điều này trong CSS (xem ra cho -moz-none cho phép ghi đè trong các phần tử con, được cho phép trong các trình duyệt khác có none):

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

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

120
2017-08-30 18:32



Đảm bảo bạn cũng có thể chọn các trường nhập: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; } - joshuadelange
Hãy rất thận trọng về việc tắt kỳ vọng giao diện người dùng của trình duyệt trên TẤT CẢ mã ngoại trừ một mục. Ví dụ về các mục danh sách <li />, chẳng hạn? - Jason T Featheringham
Chỉ cần cập nhật ... theo MDN từ Firefox 21 -moz-nonevà none giống nhau. - Kevin Fegan
Đối với điều này, bạn có thể thêm con trỏ: mặc định và con trỏ: văn bản tương ứng:) - T4NK3R
Tuyệt vời! Nó hoạt động cảm ơn bạn! - Nam Nguyen


Trong lựa chọn giải pháp trên bị dừng, nhưng người dùng vẫn nghĩ rằng bạn có thể chọn văn bản vì con trỏ vẫn thay đổi. Để giữ cho nó tĩnh, bạn sẽ phải đặt con trỏ CSS của mình:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Điều này sẽ làm cho văn bản của bạn hoàn toàn bằng phẳng, giống như trong ứng dụng dành cho máy tính để bàn.


111
2018-05-05 20:46



"Phẳng" như trái ngược với những gì? - kojow7


Bạn có thể làm như vậy trong Firefox và Safari (Chrome cũng vậy?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }

101
2017-09-21 07:09



Tôi sẽ không khuyên bạn nên làm điều này, bởi vì nó không thực sự khắc phục vấn đề; vô hiệu hóa lựa chọn văn bản - nó chỉ ẩn nó. Điều này có thể dẫn đến khả năng sử dụng kém, bởi vì nếu tôi kéo con trỏ quanh trang, tôi có thể chọn bất kỳ văn bản tùy ý nào mà không biết. Điều này có thể gây ra tất cả các loại khả năng sử dụng kỳ lạ "lỗi". - Keithamus
Không hoạt động trên các hình ảnh PNG có các vùng trong suốt: Sẽ luôn chọn màu xanh dương nhạt… Bất kỳ cách giải quyết nào? - AvL