Aplicar protejer texto SOLO a cierta parte NO a toda la página

IMAC/ · #1 (**permalink**) 07/06/2008, 10:50

Buenas

Con este script protejo la página para que no se pueda seleccionar el texto pero el problema es que tengo un buscador y de este modo nisiquiera pueden hacer click en el cuadro de texto para buscar.
Se podría aplicar de cierto modo unicamente a una parte de la página, bien sea una tabla con texto dentro.. un div... o lo que sea.

Este es el código que uso:

Código HTML:

function disableselect(e){
	return false
}

function reEnable(){
	return true
}

//if IE4+
document.onselectstart=new Function ("return false")

//if NS6
if (window.sidebar){
	document.onmousedown=disableselect
	document.onclick=reEnable
}

Gracias

aloqui · #2 (**permalink**) 07/06/2008, 11:12

Un truco que te puede valer es utilizando una imagen transparente (por ejemplo un fichero .gif) colocandola en una capa por encima del texto a proteger en la posición y dimensiones deseadas.
La imagen puede ser de 1x1 pixels, y si le aplicas un atributo id, será fácil poner la posición y las dimensiones con CSS.

Panino5001 · #3 (**permalink**) 07/06/2008, 11:34

Otra manera:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title></title> 
<script> 
function noSel() { 
    this.onselectstart = function() { 
        return false; 
    }; 
    this.unselectable = "on"; 
    this.style.MozUserSelect = "none"; 
    this.style.cursor = "default"; 
} 
window.onload=function(){ 
    noSel.call(document.getElementById('ejemplo')); 
} 
</script> 
</head> 
 
<body> 
<div id="ejemplo">Texto no seleccionable. </div> 
<div>Texto seleccionable. </div> 
 
</body> 
</html>

IMAC/ · #4 (**permalink**) 07/06/2008, 14:09

Muchas gracias, pero no estoy interesado en otros métodos para hacer lo mismo, entre otras cosas, porque no puedo usar otro por cuestiones del diseño web y su dinamismo.

Preguntaba si teniéndo el código que os he dejado existe en javascript algún modo de hacer que únicamente se aplique a ciertas partes ese mismo código (tablas, textos...etc)

Saludos.

Panino5001 · #5 (**permalink**) 07/06/2008, 14:12

Con el código que propusiste no es posible. Con cualquiera de las otras 2 opciones sí. La que yo propuse en particular te presenta un ejemplo claro de cómo aplicarlo a un elemento (hay 2 elementos en la página, y uno es seleccionable y el otro no.)

GatorV · #6 (**permalink**) 07/06/2008, 15:51

Cabe decir que si navegas con JS desactivado no te servirá de nada, o viendo la fuente de la pagina desde el cache.

Saludos.

IMAC/ · #7 (**permalink**) 08/06/2008, 14:03

Buenas de nuevo

He probado tu código Panino5001 y me ha encantado ;) Se puede aplicar a textos, a tablas, a filas o columnas.... genial.
Antes no lo probé pero pensaba que no funcionaría, estaba en lo equivocado, gracias por el script

Una cuestión.
En mi página tengo precarga de imágenes mediante javascript y lo hace en el mismo <body>, de modo que si pongo la precarga de imágenes y tu script no me funciona el script y me deja seleccionar el texto.
No entiendo apenas de javascript y por esto pregunto.
¿Cómo lo hago para que no de conflictos?

Actualmente lo tengo así:

Código HTML:

<body bgcolor="#000000" oncontextmenu="return false" onkeydown="return false" onLoad="MM_preloadImages('imgs/pepitocomepan.gif')">

Y encima de ello, en el <head>, tu código tal cual lo has puesto antes.

He visto que el script tenía un onLoad, ¿se podría meter la precarga de imágenes ahí?
Incluso sin la función javascript de MM_preloadImages() de precargame da conflicto, basta con tenerlo tal y como lo he puesto en el body para que no funcione.

Gracias.

Panino5001 · #8 (**permalink**) 08/06/2008, 19:54

Hola, IMAC, hay varias opciones. Te muestro 2. Tendrás que optar por la que te sea más cómoda:
Una sería esta:

Código PHP:

  <!--arriba el resto de tu estructura-->
<script>
function noSel() {
    this.onselectstart = function() {
        return false;
    };
    this.unselectable = "on";
    this.style.MozUserSelect = "none";
    this.style.cursor = "default";
}
window.onload=function(){
    noSel.call(document.getElementById('ejemplo'));
    MM_preloadImages('imgs/pepitocomepan.gif');
}
</script>
</head> 
<body bgcolor="#000000">
<div id="ejemplo">Texto no seleccionable. </div>
<div>Texto seleccionable. </div> 
</body>
</html>

Otra sería:

Código PHP:

  <!--arriba el resto de tu estructura-->
<script>
function noSel() {
    this.onselectstart = function() {
        return false;
    };
    this.unselectable = "on";
    this.style.MozUserSelect = "none";
    this.style.cursor = "default";
}

</script>
</head> 
<body bgcolor="#000000" onload="MM_preloadImages('imgs/pepitocomepan.gif')">
<div id="ejemplo">Texto no seleccionable. </div>
<div>Texto seleccionable. </div> 
<!--resto de tu código-->
<script>
noSel.call(document.getElementById('ejemplo'));
</script>
</body>
</html>