2009-08-03 11 views
20

Necesito desactivar el resaltado del texto seleccionado en mi aplicación web. Tengo una buena razón para hacer esto y sé que esto generalmente es una mala idea. Pero necesito hacerlo de todos modos. No importa si necesito usar CSS o JS para hacerlo. Lo que principalmente estoy buscando es la eliminación del color azul dado a los elementos resaltados.¿Cómo puedo desactivar el resaltado en html o JS?

+1

Esta pregunta no puede responderse en su forma actual. ¿Qué está causando el resaltado? ¿Estás hablando de resaltado de palabras clave u otra cosa, como reinicios? Necesitamos más información. – zombat

+0

¿Qué quiere decir exactamente resaltando? Cuando hago clic izquierdo, mantengo presionado el botón del mouse y lo arrastro sobre el texto, se resalta. ¿Es eso lo que quieres decir? –

+0

¿Te refieres a la selección? ¿Como cuando arrastras el texto? Hay varias formas de hacerlo en IE y diferentes formas de hacerlo en otros navegadores. – Nosredna

Respuesta

16

U puede utilizar el selector de pseudo clase CSS (:: :: selección y - MOZ-selección para Firefox). Ejemplo

::-moz-selection{ 
    background-color:Transparent; 
    color:#000; 
    } 

    ::selection { 
    background-color:Transparent; 
    color:#000; 
    } 
.myclass::-moz-selection, 
.myclass::selection { ... } 
+0

¡Eso funciona! ¡Hurra! Gracias. –

+0

Impresionante, podría usar esto ... – Cyclone

+4

No detiene la selección (si lo necesita, use al menos javascript -> yo uso jquery: window.onload = function() { document.onselectstart = function() {return falso;} // es decir, document.onmousedown = function() {return false;} // mozilla } U puede necesitar una secuencia de comandos adicional para cancelar los accesos directos de teclado, como en Windows CTRL + A. Pero, de nuevo, realmente no hay manera confiable para evitar que los "expertos" de la computadora copien algo que ven en su computadora. – Erv

5

Creo que lo que quiere decir es seleccionar texto (por ejemplo, arrastrando el mouse para resaltar). Si es así, esto va a cancelar la acción de la selección en el IE y Mozilla:

window.onload = function() { 
    if(document.all) { 
     document.onselectstart = handleSelectAttempt; 
    } 
    document.onmousedown = handleSelectAttempt; 
} 

function handleSelectAttempt(e) { 
    var sender = e && e.target || window.event.srcElement; 
    if(isInForm(sender)) { 
     if (window.event) { 
      event.returnValue = false; 
     } 
     return false; 
    } 
    if (window.event) { 
     event.returnValue = true; 
    } 
    return true; 
} 

function isInForm = function(element) { 
    while (element.parentNode) { 
     if (element.nodeName.ToUpperCase() == 'INPUT' 
      || element.nodeName.ToUpperCase() == 'TEXTAREA') { 
      return true; 
     } 
     if (!searchFor.parentNode) { 
      return false; 
     } 
     searchFor = searchFor.parentNode; 
    } 
    return false; 
} 
+0

eso es lo que quiero, pero ¿evita que se seleccionen las entradas? –

+1

@jcubed probablemente. Tendrás que asegurarte de que no estás dentro de una entrada o área de texto antes de abortar el evento de burbujeo. Ver mi edición –

0

Creo que está buscando el: concentro pseudo clase. Pruebe esto:

input:focus { 
    background-color: #f0f; 
} 

Le dará a su entrada un bonito color púrpura/rosa cuando se selecciona.

No estoy seguro de qué propiedades tiene que (des) configurar, pero creo que puede averiguarlo por prueba y error.

¡También tenga en cuenta que el resaltado o la ausencia del mismo es específico del navegador!

0

¿Quiere decir resaltar el texto cuando lo arrastra sobre él?

La mejor manera de hacer esto sería usando una propiedad de CSS3 llamada :: selection, sin embargo, al ser CSS3 todavía no está bien respaldado. Adelante, mira eso, de lo contrario tal vez haya una forma de hacerlo con Javascript.

0

Si su objetivo final es hacer que copiar y pegar texto sea más difícil, Javascript y CSS no son la tecnología adecuada porque no puede deshabilitar la función de fuente de vista del navegador.

Algunas otras ideas (ninguno de ellos lo ideal):

  • un applet de Java (el usuario controla la visualización y recuperación de texto)
  • misma en un plugin para el navegador diferente (Flash, Silverlight, etc.)
  • del lado del servidor (imágenes creadas bajo rendimiento)
+0

no, solo quiero no mostrar las cosas azules que la mayoría de los navegadores usan para mostrar resaltar –

+0

Veo, caso de uso interesante :) –

+0

Estoy de acuerdo en que es una suposición cuestionable tratar todas las partes de una página como si fuera texto seleccionable . Especialmente al implementar arrastrar y soltar widgets de interfaz de usuario. – Eric

6

La solución CSS3:

user-select: none; 
-moz-user-select: none; 

También hay un prefijo webkit para la facilidad de selección, pero hace algunos campos de formulario imposible enfocar (podría ser un error temporal), por lo En su lugar, podría ir con la siguiente pseudoclase para webkit:

element::selection 
Cuestiones relacionadas