validacion - validar formulario javascript html5

¿Hay alguna manera de hacer que el texto no se pueda seleccionar en una página HTML?

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo deshabilitar resaltar la selección de texto? 37 respuestas

Estoy construyendo una IU HTML con algunos elementos de texto, como nombres de pestañas, que se ven mal cuando se seleccionan. Desafortunadamente, es muy fácil para un usuario hacer doble clic en el nombre de una pestaña, que lo selecciona de forma predeterminada en muchos navegadores.

Podría ser capaz de resolver esto con un truco de JavaScript (me gustaría ver esas respuestas también), pero realmente espero que haya algo en CSS / HTML directamente que funcione en todos los navegadores.

Answer 1

"Si tu contenido es realmente interesante, entonces poco puedes hacer para protegerlo"

Eso es cierto, pero la mayoría de las copias, en mi experiencia, no tienen nada que ver con "en última instancia", geeks o plagiarios decididos ni nada de eso. Por lo general, es copia casual por personas desorientadas, e incluso una protección simple y fácilmente derrotada (fácilmente derrotada por gente como nosotros) funciona bastante bien para detenerlos. No saben nada sobre "ver fuente" o cachés o cualquier otra cosa ... diablos, ni siquiera saben qué es un navegador web o si lo están usando.

Answer 2

Aquí hay un Sass mixin (scss) para los interesados. Compass / CSS 3 no parece tener una mezcla seleccionada por el usuario.

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

Aunque Compass lo haría de una manera más sólida, es decir, solo agregaría soporte para los proveedores que haya elegido.

Answer 3

Coloque absolutamente divs sobre el área de texto con un índice Z más alto y dé a estos divs un gráfico de fondo GIF transparente.

Nota después de pensar un poco más: necesitaría tener estas ''coberturas'' vinculadas, de modo que al hacer clic en ellas se llegaría a donde se suponía que debía estar, lo que significa que podría / debería hacer esto con el elemento de anclaje configurado para display:box , ancho y alto establecidos, así como la imagen de fondo transparente.

Answer 4

Cualquier método de JavaScript o CSS se elude fácilmente con Firebug (como el caso de Flickr).

Puede usar el http://www.quirksmode.org/css/selection.html en CSS para alterar el color de resaltado.

Si las pestañas son enlaces y el rectángulo de puntos en estado activo es motivo de preocupación, puede eliminarlo también (considere la posibilidad de uso, por supuesto).

Answer 5

En la mayoría de los navegadores, esto se puede lograr usando 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;
}

Para IE <10 y Opera, necesitarás usar el atributo unselectable del elemento que deseas que no se pueda seleccionar. Puede configurar esto usando un atributo en HTML:

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

Lamentablemente, esta propiedad no se hereda, lo que significa que debe poner un atributo en la etiqueta de inicio de cada elemento dentro de <div> . Si esto es un problema, podría usar JavaScript para hacer esto recursivamente para los descendientes de un elemento:

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"));

Answer 6

En muchas ocasiones, cuando se desactiva la selección, se mejora la experiencia del usuario.

Por ejemplo, permite al usuario copiar un bloque de texto en la página sin copiar el texto de los elementos de la interfaz asociados (que se mezclarían en el texto que se está copiando).

Answer 7

Estoy encontrando cierto nivel de éxito con el CSS descrito aquí http://www.quirksmode.org/css/selection.html :

::selection {
background-color: transparent;
}

Me ocupé de la mayoría de los problemas que tenía con algunos elementos de ThemeRoller ul en una aplicación de AIR (motor WebKit). Sigue obteniendo un pequeño parche de nada (aproximadamente 15 x 15) que se selecciona, pero la mitad de la página se estaba seleccionando antes.

Answer 8

Las imágenes se pueden seleccionar también.

Existen límites para usar JavaScript para anular la selección de texto, como podría suceder incluso en los lugares donde desea seleccionar. Para garantizar una carrera exitosa y rica, evite todos los requisitos que necesiten la capacidad de influir o administrar el navegador más allá de lo normal ... a menos que, por supuesto, le estén pagando extremadamente bien.

Answer 9

Lo siguiente funciona bastante bien en Firefox si elimino la línea de escritura, no funciona. Alguien tiene alguna idea de por qué es necesaria la línea de escritura.

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

Answer 10

Para Firefox puede aplicar la declaración de CSS "-moz-user-select" a "none". Consulte su documentación, user-select .

Es una "vista previa" del futuro "user-select", como dicen, así que tal vez los WebKit basados ​​en Opera o WebKit admitirán eso. También recuerdo haber encontrado algo para Internet Explorer, pero no recuerdo qué :).

De todos modos, a menos que sea una situación específica en la que la selección de texto haga que falle alguna funcionalidad dinámica, no debe anular realmente lo que los usuarios esperan de una página web, y eso es poder seleccionar cualquier texto que deseen.

Answer 11

Para Safari, -khtml-user-select: none , como Mozilla''s -moz-user-select (o, en JavaScript, target.style.KhtmlUserSelect="none"; ).

Answer 12

Para ver un ejemplo de por qué podría ser deseable suprimir la selección, vea SIMILE TImeline , que utiliza la función arrastrar y soltar para explorar la línea de tiempo, durante la cual el movimiento vertical accidental del mouse hace que las etiquetas se resalten inesperadamente, lo que se ve raro.

Answer 13

Prueba esto:

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

Simple, pero efectivo ... funciona en las versiones actuales de todos los principales navegadores.

Answer 14

Si se ve mal, puede usar CSS para cambiar la apariencia de las secciones seleccionadas.

Answer 15

Todas las variaciones correctas de CSS son:

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

Answer 16

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

EDITAR

El código aparentemente proviene de http://www.dynamicdrive.com