Effacer la sélection de texte avec JavaScript

Question

Question simple à laquelle je ne trouve pas de réponse :

Comment puis-je utiliser JavaScript (ou jQuery) pour désélectionner tout texte qui peut être sélectionné sur une page web ?

Par exemple, l'utilisateur clique et glisse pour mettre en évidence un morceau de texte. Je veux avoir une fonction deselectAll() qui efface cette sélection. Comment dois-je m'y prendre pour l'écrire ?

Merci pour votre aide.

Answer 1

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édit à M. Y.

Answer 2

Le mieux est de tester directement les fonctionnalités que vous souhaitez :

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

Answer 3

État des lieux des affaires de dé-sélection 2014

J'ai fait quelques recherches de mon côté. Voici la fonction que j'ai écrite et que j'utilise ces jours-ci :

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

En gros, getSelection().removeAllRanges() est actuellement pris en charge par tous les navigateurs modernes (y compris IE9+). Il s'agit clairement de la méthode correcte pour l'avenir.

Les problèmes de compatibilité sont pris en compte :

• Anciennes versions de Chrome et Safari utilisées getSelection().empty()
• Utilisation d'IE8 et des versions inférieures document.selection.empty()

Mise à jour

C'est probablement une bonne idée d'emballer cette fonctionnalité de sélection pour la réutiliser.

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

J'en ai fait un wiki communautaire pour que vous puissiez y ajouter des fonctionnalités, ou mettre à jour les choses au fur et à mesure que les normes évoluent.

Answer 4

Voici la réponse acceptée, mais en deux lignes de code :

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

Le seul contrôle que je ne fais pas est celui de l'existence de removeAllRanges - mais, à ma connaissance, aucun navigateur ne possède l'une ou l'autre de ces fonctions. window.getSelection o document.selection pero n'a pas ont soit un .empty o .removeAllRanges pour cette propriété.

Answer 5

Window.getSelection() vous permet d'accéder au texte sélectionné, à partir de là, il y a quelques choses que vous pouvez faire pour le manipuler

Lire la suite : Développeur Mozilla DOM Selection