it-swarm-vi.tech

Có cách nào để làm cho văn bản không thể chọn trên một trang HTML không?

Tôi đang xây dựng giao diện người dùng HTML với một số thành phần văn bản, chẳng hạn như tên tab, trông xấu khi được chọn. Thật không may, người dùng rất dễ bấm đúp vào tên tab, theo mặc định, nó sẽ chọn nó trong nhiều trình duyệt.

Tôi có thể giải quyết vấn đề này bằng một thủ thuật JavaScript (tôi cũng muốn xem những câu trả lời đó) - nhưng tôi thực sự hy vọng có một cái gì đó trong CSS/HTML trực tiếp hoạt động trên tất cả các trình duyệt.

136
Tyler

Trong hầu hết các trình duyệt, điều này có thể đạt được bằng CSS:

*.unselectable {
   -moz-user-select: -moz-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, bạn sẽ cần sử dụng thuộc tính unselectable 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 kế thừa, có nghĩa là bạn phải đặt một thuộc tính vào thẻ bắt đầu của mọi thành phần bên trong <div>. Nếu đây là một vấn đề, thay vào đó, bạn có thể sử dụng JavaScript để thực hiện điều này một cách đệ quy cho hậu duệ của một thành phần:

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"));
187
Tim Down
<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/


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("mydiv")) //Disable text selection on element with id="mydiv"


</script>

CHỈNH SỬA

Mã rõ ràng đến từ http://www.dynamicdrive.com

41
dimarzionist

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

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
32
Blowsie

Thử đi:

<div onselectstart="return false">some stuff</div>

Đơn giản, nhưng hiệu quả ... hoạt động trong các phiên bản hiện tại của tất cả các trình duyệt chính.

13
Stephen M. Redd

Đối với Firefox, bạn có thể áp dụng khai báo CSS "-moz-user-select" thành "none". Kiểm tra tài liệu của họ, người dùng chọn.

Đó là "bản xem trước" của "người dùng chọn" trong tương lai như họ nói, vì vậy có thể Opera hoặc WebKit - các trình duyệt dựa trên sẽ hỗ trợ điều đó. Tôi cũng nhớ lại việc tìm kiếm thứ gì đó cho Internet Explorer, nhưng tôi không nhớ gì :).

Dù sao, trừ khi đó là một tình huống cụ thể trong đó việc chọn văn bản làm cho một số chức năng động không thành công, bạn không nên thực sự ghi đè lên những gì người dùng đang mong đợi từ một trang web và đó là có thể chọn bất kỳ văn bản nào họ muốn.

11
Jorge Alves

Tôi đang tìm thấy một số mức độ thành công với CSS được mô tả ở đây http://www.quirksmode.org/css/selection.html :

::selection {
    background-color: transparent;
}

Nó đã giải quyết hầu hết các vấn đề tôi gặp phải với một số yếu tố ThemeRoller ul trong một ứng dụng AIR (công cụ WebKit). Vẫn nhận được một bản vá nhỏ (khoảng 15 x 15) không có gì được chọn, nhưng một nửa trang đã được chọn trước đó.

8
jlleblanc

Vị trí div hoàn toàn trên khu vực văn bản có chỉ số z cao hơn và cung cấp cho các div này trong suốt GIF đồ họa nền.

Lưu ý sau khi suy nghĩ thêm một chút - Bạn cần phải có các 'bìa' này được liên kết để nhấp vào chúng sẽ đưa bạn đến nơi mà tab được cho là, điều đó có nghĩa là bạn có thể/nên làm điều này với phần tử neo được đặt thành display:box, chiều rộng và chiều cao được đặt cũng như hình nền trong suốt.

6
Dave Rutledge

Đối với Safari, -khtml-user-select: none, giống như -moz-user-select của Mozilla (hoặc, trong JavaScript, target.style.KhtmlUserSelect="none";).

4
Alan Hensel

Để biết ví dụ về lý do tại sao có thể muốn loại bỏ lựa chọn, hãy xem SIMILE TImeline , sử dụng kéo và thả để khám phá dòng thời gian, trong đó chuyển động chuột dọc vô tình làm cho nhãn bị tô sáng bất ngờ, Trông thật lạ.

4
pdc

Đây là một Sass mixin (scss) cho những ai quan tâm. La bàn /CSS 3 dường như không có mixin do người dùng chọn.

// @usage use within a rule
// ex. img {@include user-select(none);}
// @param assumed valid user-select value
@mixin user-select($value)
{
    & {
        -webkit-touch-callout: $value;
        -webkit-user-select: $value;
        -khtml-user-select: $value;
        -moz-user-select: $value;
        -ms-user-select: $value;
        user-select: $value;
    }
}

Mặc dù La bàn sẽ làm điều đó theo một cách mạnh mẽ hơn, tức là chỉ thêm hỗ trợ cho các nhà cung cấp mà bạn đã chọn.

3
rgb

"Nếu nội dung của bạn thực sự thú vị, thì cuối cùng bạn cũng có thể làm rất ít để bảo vệ nó"

Điều đó đúng, nhưng hầu hết việc sao chép, theo kinh nghiệm của tôi, không liên quan gì đến "cuối cùng" hoặc chuyên viên máy tính hoặc người đạo văn quyết tâm hoặc bất cứ điều gì tương tự. Nó thường được sao chép ngẫu nhiên bởi những người không biết gì, và thậm chí là một sự bảo vệ đơn giản, dễ bị đánh bại (dễ bị đánh bại bởi những người như chúng tôi, nghĩa là) hoạt động khá tốt để ngăn chặn chúng. Họ không biết bất cứ điều gì về "xem nguồn" hoặc bộ nhớ cache hoặc bất cứ điều gì khác ... quái gì, họ thậm chí không biết trình duyệt web là gì hoặc họ đang sử dụng một trình duyệt.

3
Big Bill

Nếu nó trông tệ, bạn có thể sử dụng CSS để thay đổi diện mạo của các phần được chọn.

1
Wedge

Hình ảnh có thể được chọn quá.

Có các giới hạn trong việc sử dụng JavaScript để bỏ chọn văn bản, vì nó có thể xảy ra ngay cả ở những nơi bạn muốn chọn. Để đảm bảo sự nghiệp thành công và giàu có, hãy tránh xa mọi yêu cầu cần có khả năng ảnh hưởng hoặc quản lý trình duyệt vượt quá mức bình thường ... tất nhiên trừ khi họ trả tiền cho bạn cực kỳ tốt.

1
Kinjal Dixit

Bất kỳ phương thức JavaScript hoặc CSS nào cũng dễ dàng bị phá vỡ bằng Fireorms (như trường hợp của Flickr).

Bạn có thể sử dụng phần tử ::selection pseudo trong CSS để thay đổi màu tô sáng.

Nếu các tab là các liên kết và hình chữ nhật chấm ở trạng thái hoạt động là điều đáng quan tâm, bạn cũng có thể loại bỏ điều đó (tất nhiên là xem xét khả năng sử dụng).

1
Taylor Edmiston

Có rất nhiều lần khi tắt khả năng lựa chọn sẽ nâng cao trải nghiệm người dùng.

Chẳng hạn, cho phép người dùng sao chép một khối văn bản trên trang mà không cần sao chép văn bản của bất kỳ thành phần giao diện nào được liên kết với nó (điều đó sẽ trở nên xen kẽ trong văn bản được sao chép).

1
kbcom

Các công việc sau đây trong Firefox đủ thú vị nếu tôi xóa dòng ghi nó không hoạt động. Bất cứ ai cũng có cái nhìn sâu sắc tại sao dòng viết là cần thiết.

<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>
0
hbtdev