por - getelementsbyname javascript ejemplo

Borrar selección de texto con JavaScript

Question

Pregunta simple a 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? El usuario de EG hace clic y arrastra para resaltar un poco de texto. Quiero tener una función de deselectAll () que borre esta selección. ¿Cómo debo escribirlo?

Gracias por la ayuda.

Answer 1

Estado de Des-selección Asuntos 2014

Hice algo de investigación por mi cuenta. Aquí está la función que escribí y estoy usando 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() es actualmente compatible con todos los navegadores modernos (incluido IE9 +). Este es claramente el método correcto para avanzar.

Problemas de compatibilidad contabilizados:

• Las versiones anteriores de Chrome y Safari usaban getSelection().empty()
• IE8 y abajo utilizan document.selection.empty()

Actualizar

Probablemente sea una buena idea finalizar 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 convertido esta wiki en una comunidad para que las personas puedan agregar funcionalidad a esto o actualizar las cosas a medida que evolucionan los estándares.

Answer 2

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 cheque que no hago es por la existencia de removeAllRanges, pero AFAIK no tiene un navegador que tenga window.getSelection o document.selection pero no tiene un .empty o .removeAllRanges para esa propiedad.

Answer 3

Lo mejor es 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();
    }
}

Answer 4

window.getSelection () te permite acceder al texto seleccionado, a partir de ahí, hay algunas cosas que puedes hacer para manipularlo.

Leer más: Developer Mozilla DOM Selection

Answer 5

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.