Borrar selección de texto con JavaScript

122

Pregunta simple para la que no puedo encontrar la respuesta: ¿cómo puedo usar JavaScript (o jQuery) para anular la selección de cualquier texto que pueda seleccionarse en una página web? Por ejemplo, el usuario hace clic y arrastra para resaltar un poco de texto. Quiero tener una función deselectAll () que borra esta selección. ¿Cómo debo hacer para escribirlo?

Gracias por la ayuda.

hombre1
fuente

Respuestas:

206
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();
}

Crédito al Sr. Y.

Gert Grenander
fuente
44
Esto supone que la existencia de document.selectionimplica la existencia de un empty()método de la misma. Has probado el método en cualquier otro caso, por lo que también podrías probarlo emptyen el caso final.
Tim Down
Usé esto dentro de mi complemento jquery.tableCheckbox.js , gracias.
Marco Kerwitz
1
He creado un ejemplo de trabajo completo basado en su sugerencia pero agregando algunos extras jsfiddle.net/mkrivan/hohx4nes La línea más importante es window.getSelection (). AddRange (document.createRange ()); Sin este IE no deselecciona el texto en algunas condiciones. Y he cambiado el orden del método de detección.
Miklos Krivan
¡Me salvas el día, amigo! Estaba usando scratchpad y cuando rasgué toda la página fue seleccionada y con este buen script anulo la selección de mi página antes de usar el plugin scratchpad. Básicamente funciona! ¡Muchas gracias!
Combinar
1
Creo que window.getSelection().removeAllRanges();funciona bien en IE (edge) y Safari.
chile
48

Lo mejor para probar las funciones que desea directamente:

var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
    if (sel.removeAllRanges) {
        sel.removeAllRanges();
    } else if (sel.empty) {
        sel.empty();
    }
}
Tim Down
fuente
15

Estado de los asuntos de des-selección 2014

Investigué por mi cuenta. Aquí está la función que escribí y estoy usando en estos días:

(function deselect(){
  var selection = ('getSelection' in window)
    ? window.getSelection()
    : ('selection' in document)
      ? document.selection
      : null;
  if ('removeAllRanges' in selection) selection.removeAllRanges();
  else if ('empty' in selection) selection.empty();
})();

Básicamente, getSelection().removeAllRanges()actualmente es compatible con todos los navegadores modernos (incluido IE9 +). Este es claramente el método correcto para avanzar.

Los problemas de compatibilidad explicaron:

  • Versiones antiguas de Chrome y Safari utilizadas getSelection().empty()
  • IE8 y abajo usado document.selection.empty()

Actualizar

Probablemente sea una buena idea concluir esta funcionalidad de selección para su reutilización.

function ScSelection(){
  var sel=this;
  var selection = sel.selection = 
    'getSelection' in window
      ? window.getSelection()
      : 'selection' in document
        ? document.selection
        : null;
  sel.deselect = function(){
    if ('removeAllRanges' in selection) selection.removeAllRanges();
    else if ('empty' in selection) selection.empty();
    return sel; // chainable :)
  };
  sel.getParentElement = function(){
    if ('anchorNode' in selection) return selection.anchorNode.parentElement;
    else return selection.createRange().parentElement();
  };
}

// use it
var sel = new ScSelection;
var $parentSection = $(sel.getParentElement()).closest('section');
sel.deselect();

He hecho de esto un wiki comunitario para que ustedes puedan agregar funcionalidad a esto o actualizar cosas a medida que evolucionan los estándares.

rev. ChaseMoskal
fuente
77
Eso está haciendo lo mismo que mi respuesta. Nada ha cambiado en 4 años.
Tim Down
3
Horrible. Literalmente, no solo robó la implementación de otro póster, sino que la descartó completamente sintácticamente.
kamelkev
1

Aquí está la respuesta aceptada, pero en dos líneas de código:

var selection = window.getSelection ? window.getSelection() : document.selection ? document.selection : null;
if(!!selection) selection.empty ? selection.empty() : selection.removeAllRanges();

El único freno que no hago es para la existencia de removeAllRanges - pero que yo sepa no hay ningún navegador que tiene, ya sea window.getSelectiono document.selectionsino no tener ya sea una .emptyo .removeAllRangespara esa propiedad.

Grinn
fuente
-1

agregue esto a su script para evitar hacer clic derecho y seleccionar texto.

Se pueden agregar excepciones a var 'om'.

var d=document,om=['input','textarea','select'];;
function ie(){if(d.all){(mg);return false;}}function mz(e){if(d.layers||(d.getElementById&&!d.all)){if(e.which==2||e.which==3){(mg);return false;}}}if(d.layers){d.captureEvents(Event.mousedown);d.onmousedown=mz;}else{d.onmouseup=mz;d.oncontextmenu=ie;}d.oncontextmenu=new Function('return false');om=om.join('|');function ds(e){if(om.indexOf(e.target.tagName.toLowerCase())==-1);return false;}function rn(){return true;}if(typeof d.onselectstart!='undefined')d.onselectstart=new Function('return false');else{d.onmousedown=ds;d.onmouseup=rn;}
usuario2180104
fuente