làm html text unselectable

Trước tiên, tôi đã ở đây How to make HTML Text unselectable
Nhưng điều đó không giải quyết vấn đề của tôi, (phiên bản JavaScript hoạt động tốt, nhưng tôi cần phải làm cho nó sử dụng HTML và CSS, Tôi không thể sử dụng JavaScript) Tôi đã sử dụng CSS được đề xuất, nhưng hãy xem số DEMO kéo chuột từ [kéo từ đây] đến [đến đây] bạn sẽ thấy rằng văn bản vẫn có thể chọn được.
bất kỳ cách nào để làm cho nó thực sự không thể chọn được?
Cảm ơnlàm html text unselectable

Nguồn

2012-05-04 skafandri

Tôi nghĩ rằng nó không thể làm cho văn bản 100% unselectable. Người dùng luôn có thể mở nguồn và sao chép nó từ đó. – Manuel

Tôi đồng ý, ý tôi là từ trình duyệt. – skafandri

Tôi biết nó có thể làm cho nó khó hơn bình thường, nhưng điều đó đòi hỏi javascript – Manuel

Sau khi xem xét vấn đề này, lóe lên trong óc phương pháp khác để ngăn chặn người dùng chọn văn bản trong khi xem trang, về cơ bản, thiết lập một mặt nạ trên văn bản mục tiêu:

Fiddle của bạn được cập nhật here!

Ví dụ:

CSS

.wrapTxt { 
    position: relative; 
} 
.wrapTxt .mask { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

HTML

<p class="wrapTxt"> 
    This is my text! My text is mine and no one Else's! 
    <span class="mask"></span> 
</p>

Nguyên tắc ở đây là đơn giản (Fiddle), có một phần tử khối trên văn bản, chiếm tất cả không gian bao bọc của nó.

Sự sụp đổ là một việc thực hiện khó khăn nếu bạn cần một dòng để có thể lựa chọn và dòng tiếp theo thì không. Ngoài ra, các liên kết trên văn bản "không thể chọn" sẽ không có sẵn cho tôi.

Cuối cùng lưu ý:

Người dùng luôn có thể quay xung quanh này, hoặc bằng cách nhìn vào mã nguồn, hoặc bằng cách kéo chuột từ trên xuống dưới cùng của trang web.

Nguồn

2012-05-06 03:02:36 Zuul

Nhấn ba lần cũng hoạt động để chọn văn bản. –

Bạn có thể sử dụng CSS như thế này:

CSS

.unselectable { 
    -webkit-user-select: none; /* Chrome all/Safari all */ 
    -moz-user-select: none;  /* Firefox all */ 
    -ms-user-select: none;  /* IE 10+ */ 

    /* No support for these yet, use at own risk */ 
    -o-user-select: none; 
    user-select: none; 
}

Đối với các phiên bản IE cũ, vấn đề này thường là khó khăn hơn để đối phó với, nhưng bạn có thể sử dụng một hành vi:

CSS

.unselectable { 
    behavior: url(ieUserSelectFix.htc); 
}

và tập tin hành vi "ieUserSelectFix.htc":

<public:component lightweight="true"> 

    <public:attach event="ondocumentready" onevent="stopSelection()" /> 

    <script type="text/javascript"> 
    <!-- 
     function stopSelection() { 
      element.onselectstart = function() { return(false); }; 
      element.setAttribute('unselectable', 'on', 0); 
     } 
    //--> 
    </script> 
</public:component>

Với javascript bạn có thể:

yourElement.onselectstart = function() { return(false); };

Nguồn

2012-05-04 17:13:59 Zuul

thử một cái gì đó như thế này

   <!DOCTYPE html> 
       <html xmlns="http://www.w3.org/1999/xhtml"> 
       <head> 
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
       <title>Disable /Prevent Text Selection jQuery-JavaScript</title> 
       <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
       <script type="text/javascript"> 
       // Begin: 
       // Jquery Function to Disable Text Selection 
       (function($){if($.browser.mozilla){$.fn.disableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":"none"})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":""})})}}else{if($.browser.msie){$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("selectstart.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("selectstart.disableTextSelect")})}}else{$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("mousedown.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("mousedown.disableTextSelect")})}}}})(jQuery) 
       // EO Jquery Function 

       // Usage 
       // Load Jquery min .js ignore if already done so 
       // $("element to disable text").disableTextSelect(); 
       // $("element to Enable text").enableTextSelect(); 
       // 

       jQuery(function($) { 
       $("body").disableTextSelect(); 

       $("#code").mouseover(function(){ 
       $("body").enableTextSelect(); 
       }); 

       $("#code").mouseout(function(){ 

       // Code for Deselect Text When Mouseout the Code Area 
       if (window.getSelection) { 
        if (window.getSelection().empty) { // Chrome 
        window.getSelection().empty(); 
        } else if (window.getSelection().removeAllRanges) { // Firefox 
        window.getSelection().removeAllRanges(); 
        } 
       } else if (document.selection) { // IE? 
        document.selection.empty(); 
       } 

       $("body").disableTextSelect(); 
       }); 
       }); 
       </script> 

       <style type="text/css"> 
       <!-- 
       body { 
       margin-left: 10px; 
       margin-top: 10px; 
       } 

       #code 
       { 
       padding:20px; 
       border:2px dashed #CCC; 
       font-family:"Courier New", Courier, monospace; 
       font-size:15px; 
       background-color:#EEE; 
       } 
       --> 
       </style> 
       </head> 

       <body> 
       <h2>Disable /Prevent Text Selection jQuery-JavaScript</h2> 
       <p>Below this Code Area User can Allow to Select a Text in other Area text selection was disabled</p> 
       <p id="code"> 
       $(".elementsToDisableSelectFor").disableTextSelect();</p> 
       <p>When you are leaving above code box selection was deselected! If selected !</p> 
       </body> 
       </html>

séc jsfiddle đầu ra:

http://jsfiddle.net/bHafB/

EDIT: Đây là một phương pháp qua trình duyệt để ngăn ngừa lựa chọn văn bản sử dụng một unselectable = "on" thuộc tính nguyên tố.

 <!DOCTYPE html> 
     <html> 
      <head> 
      <title>Unselectable Text</title> 
      <style type="text/css"> 
      [unselectable=on] { -moz-user-select: none; -khtml-user-select: none; user-select: none; } 
      </style> 
      </head> 
      <body id="doc"> 
     <p unselectable="on">For example, the text in this paragraph 
     cannot be selected. 
     For example, the text in this paragraph 
     cannot be selected 
     For example, the text in this paragraph 
     cannot be selected</p> 
      </body> 
      </html>

Nguồn

2012-05-04 19:40:47 srini

bạn đã đọc câu hỏi của tôi ????? – skafandri

bây giờ kiểm tra câu trả lời của tôi Mr.skafandri – srini

Đã không hoạt động đối với tôi trong OSX Chrome. – Volomike

Overlay đầy đủ trong suốt văn bản:

<div style="position:absolute;left: 1;top:1;z-index:1;font-size: 10pt;color: rgb(0, 0, 0);">highline me</div><br/><div style="position:absolute;left: 0;top:0;;z-index:2;font-size: 20pt;color: rgba(0, 0, 0, 0);">*********</div>

Nguồn

2013-11-20 22:38:42 flodur

làm html text unselectable

Trả lời

Các vấn đề liên quan