make html texto no seleccionable

En primer lugar, he estado aquí How to make HTML Text unselectable
Pero eso no resuelve mi problema, (la versión JavaScript funciona bien, pero necesita para que sea el uso de HTML y CSS, no puedo usar JavaScript) Usé el CSS recomendado, pero mira mi DEMO, arrastra el mouse desde [arrastrar desde aquí] hasta [hasta aquí] verás que el texto aún se puede seleccionar.
cualquier forma de hacerlo realmente unselectable?
Graciasmake html texto no seleccionable

Fuente

2012-05-04 skafandri

creo que es imposible hacer que el texto no seleccionable 100%. El usuario siempre puede abrir la fuente y copiarla desde allí. – Manuel

Acepto, quiero decir desde el navegador. – skafandri

Sé que es posible hacerlo más difícil de lo normal, pero eso requiere javascript – Manuel

Después de revisar este problema, vino a la mente otro método para evitar que el usuario seleccionar texto mientras se visualiza la página, básicamente, la creación de una máscara sobre el texto de destino:

Su violín actualiza here!

Ejemplo:

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>

El principio es simple (Fiddle), tiene un elemento de bloque sobre el texto, ocupando todo su espacio de contenedor.

La caída es una implementación difícil si necesita una línea para ser seleccionable y la siguiente no. Además, los enlaces en el texto "no seleccionable" no estarán disponibles.

Nota final:

El usuario siempre puede ir en torno a esta, ya sea por mirar el código fuente, o arrastrando el ratón de arriba a abajo de la página web.

Fuente

2012-05-06 03:02:36 Zuul

Triple clic también funciona para seleccionar el texto. –

Puede utilizar CSS como esto:

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; 
}

Para versiones anteriores de IE, el problema generalmente es más difícil de tratar, pero se puede utilizar un comportamiento:

CSS

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

y el archivo de comportamiento "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>

con javascript puede:

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

Fuente

2012-05-04 17:13:59 Zuul

intentar algo como esto

   <!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>

de verificación de salida jsFiddle:

http://jsfiddle.net/bHafB/

EDIT: Este es un método multi-navegador para la prevención de la selección de texto usando un no seleccionable = "on" atributo elemento.

 <!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>

Fuente

2012-05-04 19:40:47 srini

¿Has leído mi pregunta ????? – skafandri

ahora verifique mi respuesta Mr.skafandri – srini

No funcionó para mí en OSX Chrome. – Volomike

superposición completa texto transparente:

<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>

Fuente

2013-11-20 22:38:42 flodur

Respuesta

Cuestiones relacionadas