javascript: deshabilitar la selección de texto

84

Estoy usando javascript para deshabilitar la selección de texto en mi sitio web.

El codigo es:

<script type="text/JavaScript">

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}
</script>

Se puede encontrar un script similar aquí

En mi localhost: todos los navegadores (Firefox, Chrome, IE y Safari) funcionan muy bien.

En mi sitio Live: Todo está bien EXCEPTO Firefox.

Mis preguntas son:

  1. ¿Alguien tiene alguna sugerencia de por qué Firefox se comporta de manera diferente para el sitio en vivo y el host local? Nota: Javascript está habilitado.

  2. Tal vez mi script sea demasiado simplista, así que intenté lo siguiente con EXACTAMENTE LOS MISMOS resultados

arpegiar
fuente
4
Permítame sugerirle que evite el uso de Javascript en este caso. Solo use CSS, puede encontrar más información sobre la selección de texto en CSS en esta pregunta
RienNeVaPlu͢s
Es probable que el segundo guión sea demasiado antiguo. Elimine! Document.all ya que creo que rompe el soporte de fx
mplungjan
9
Odio los sitios que hacen esto. Si quiero copiar algo de texto, puedo abrir las herramientas de desarrollo y copiarlo de todos modos. Esto es solo un inconveniente innecesario.
uylmz
4
Exactamente como dice Reek. No haga esto a menos que tenga una muy buena razón para ello. Es posible que muchas personas solo quieran seleccionar algo para buscarlo o usar un diccionario para buscar una palabra. Prohibir esto es solo una molestia que podría alejar a las personas de su sitio a largo plazo.
Czechnology
1
En primer lugar, también odio las páginas que prohíben seleccionar (texto y otras cosas) solo por "diversión", pero creo que es una buena pregunta, ya que hay algunas razones legítimas para deshabilitarlas ( por ejemplo , para implementar gestos del mouse o arrastrar y soltar bloques de texto en un juego de lo que sea). Por supuesto, usar JS para lograr ese fin es malo, pero la solución CSS también tiene sus problemas (en algunos navegadores, por user-selectsí sola no funcionará, requiere el prefijo "-vendor-", como -moz-user-selecty -webkit-user-select, entonces, para que funcione , es necesario establecer todas las variaciones posibles en none).
Cyberknight

Respuestas:

209

Simplemente use este método CSS:

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

Puede encontrar la misma respuesta aquí: ¿Cómo deshabilitar el resaltado de selección de texto usando CSS?

Zachrip
fuente
6
También agregue el enlace desde donde encontró esta respuesta: stackoverflow.com/questions/826782/…
Ron van der Heijden
Muchas gracias. El CSS en el cuerpo funcionó para todos los casos excepto IE. ¿Existe una solución CSS ordenada para resolver también este problema para IE? ¡Ahora estoy usando la combinación de Js y CSS para cubrir todos los navegadores! gracias
arpegio
1. ¿Por qué no se ha etiquetado esta respuesta como la solución? ... Resuelve el problema en cuestión de la manera más precisa y sencilla. 2. Cabe mencionar que esta definición de CSS se puede implementar en cualquier elemento HTML y no solo en BODY.
TheCuBeMan
1
@TheCuBeMan "user-select" es una característica no estándar, y en mi opinión, por lo tanto, no es la mejor solución.
ndugger
1
Probablemente sea el mejor enfoque: los navegadores lo manejan de manera diferente porque es complicado y todos tienen diferentes tomas. Es decir, quieren proporcionar la UX deseada (sin selección) y al mismo tiempo permitir que el usuario seleccione si realmente lo desea . El borrador del W3C tiene más notas y caniuse muestra un apoyo fantástico. Está bien que los navegadores lo manejen de manera diferente: el usuario obtendrá la experiencia que brinda su navegador preferido.
Shawn Erquhart
24

Estoy escribiendo el control de la interfaz de usuario del control deslizante para proporcionar la función de arrastre, esta es mi manera de evitar que el contenido se seleccione cuando el usuario está arrastrando:

function disableSelect(event) {
    event.preventDefault();
}

function startDrag(event) {
    window.addEventListener('mouseup', onDragEnd);
    window.addEventListener('selectstart', disableSelect);
    // ... my other code
}

function onDragEnd() {
    window.removeEventListener('mouseup', onDragEnd);
    window.removeEventListener('selectstart', disableSelect);
    // ... my other code
}

ata startDragen tu dom:

<button onmousedown="startDrag">...</button>

Si desea deshabilitar estáticamente la selección de texto en todos los elementos, ejecute el código cuando se carguen los elementos:

window.addEventListener('selectstart', function(e){ e.preventDefault(); });

      
Yi Feng Xie
fuente
2
Esta es la mejor solución, porque la solución CSS no funciona para divs con el contenteditableatributo (como si quisiera deshabilitar la selección de texto mientras el mouse del usuario cambia el tamaño del control).
mbomb007
12

Para JavaScript, use esta función:

function disableselect(e) {return false}
document.onselectstart = new Function (return false)
document.onmousedown = disableselect

para habilitar la selección use esto:

function reEnable() {return true}

y use esta función en cualquier lugar que desee:

document.onclick = reEnable
Hassan Azimi
fuente
Excepto new Function (return false)que no es un código JavaScript válido. Utilice solo document.onselectstart = disableselect.
amik
@amik qué tal esto: document.oncontextmenu = new Function("return false;");o esto usando CSS:<body onselectstart="return false">
Hassan Azimi
new Function("return false;")funcionaría, pero es innecesariamente complicado en comparación con el uso disableselectque ya tiene. onselectstart="return false"también funcionaría, pero no tiene nada que ver con CSS. También he notado que el resto de su respuesta también es incorrecta: la reEnablefunción no funcionaría en absoluto.
amik
@amik jaja bueno, nada es necesario en JavaScript, pero aún lo hacemos. Ciertamente, el código se puede refactorizar pero eche un vistazo a la pregunta, la respuesta, responde la pregunta sin intentar hacer la tarea.
Hassan Azimi
Bueno, pero SO es un lugar para la educación, así que considero proporcionar una respuesta que sea técnicamente incorrecta y que no explique en absoluto que no es una buena idea.
amik
4

Si tiene una página html como esta:

    <cuerpo
    onbeforecopy = "devolver falso"
    ondragstart = "devolver falso" 
    onselectstart = "devolver falso" 
    oncontextmenu = "devolver falso" 
    onselect = "document.selection.empty ()" 
    oncopy = "document.selection.empty ()">

Existe una forma sencilla de desactivar todos los eventos:

document.write(document.body.innerHTML)

Obtuviste el contenido html y perdiste otras cosas.

bootsoon
fuente
4

También se puede usar, funciona bien en todos los navegadores, requiere javascript:

onselectstart = (e) => {e.preventDefault()}

Ejemplo:

onselectstart = (e) => {
  e.preventDefault()
  console.log("nope!")
  }
Select me!


Otra alternativa de js, probando los soportes de CSS y deshabilitando userSelect, o MozUserSelectpara Firefox.

let FF
if (CSS.supports("( -moz-user-select: none )")){FF = 1} else {FF = 0}
(FF===1) ? document.body.style.MozUserSelect="none" : document.body.style.userSelect="none"
Select me!


CSS puro, misma lógica. Advertencia, tendrá que extender esas reglas a todos los navegadores, esto puede ser detallado.

@supports (user-select:none) {
  div {
    user-select:none
  }
}

@supports (-moz-user-select:none) {
  div {
    -moz-user-select:none
  }
}
<div>Select me!</div>

NVRM
fuente
0

Simple Copia este texto y ponte el antes </body>

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}
Hasan Sheikh
fuente