Effacer la sélection de texte avec JavaScript

123

Question simple à laquelle je ne trouve pas de réponse: comment puis-je utiliser JavaScript (ou jQuery) pour désélectionner tout texte pouvant être sélectionné sur une page Web? L'utilisateur EG clique et fait glisser pour mettre en évidence un peu de texte - je veux avoir une fonction deselectAll () qui efface cette sélection. Comment dois-je procéder pour l'écrire?

Merci pour l'aide.

homme1
la source

Réponses:

207
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.

Gert Grenander
la source
4
Cela suppose que l'existence de document.selectionimplique l'existence d'une empty()méthode de celui-ci. Vous avez testé la méthode dans tous les autres cas, vous pouvez donc aussi tester la méthode emptydans le dernier cas.
Tim Down
Utilisé ceci dans mon plugin jquery.tableCheckbox.js , merci.
Marco Kerwitz
1
J'ai créé un exemple de travail complet basé sur votre suggestion, mais en ajoutant quelques extras jsfiddle.net/mkrivan/hohx4nes La ligne la plus importante est window.getSelection (). AddRange (document.createRange ()); Sans cela, IE ne désélectionne pas le texte dans certaines conditions. Et j'ai changé l'ordre de la détection de méthode.
Miklos Krivan
Vous sauvez ma journée mon ami! J'utilisais le scratchpad et lors du scratch, toute la page était sélectionnée et avec ce bon script, je désélectionne ma page avant d'utiliser le plugin scratchpad. En gros, ça marche! Merci beaucoup!
Combinez le
1
Je trouve que cela window.getSelection().removeAllRanges();fonctionne bien dans IE (bord) et Safari.
chile
48

Il est préférable de tester directement les fonctionnalités souhaitées:

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

État des affaires de désélection 2014

J'ai fait mes propres recherches. 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();
})();

Fondamentalement, getSelection().removeAllRanges()est actuellement pris en charge par tous les navigateurs modernes (y compris IE9 +). C'est clairement la bonne méthode pour aller de l'avant.

Problèmes de compatibilité pris en compte:

  • Anciennes versions de Chrome et Safari utilisées getSelection().empty()
  • IE8 et inférieur utilisé document.selection.empty()

Mettre à jour

C'est probablement une bonne idée de terminer 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 afin que vous puissiez y ajouter des fonctionnalités ou mettre à jour des choses à mesure que les normes évoluent.

ChaseMoskal
la source
7
Cela fait la même chose que ma réponse. Rien n'a changé en 4 ans.
Tim Down
3
Horrible. Non seulement vous avez littéralement volé l'implémentation d'un autre poster, mais vous l'avez complètement détruite syntaxiquement.
kamelkev
1

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 le fais pas est l'existence de removeAllRanges - mais autant que je sache il n'y a pas que le navigateur a soit window.getSelectionou document.selectionmais n'avoir soit un ou pour cette propriété..empty.removeAllRanges

Grinn
la source
0

window.getSelection () vous permet d'accéder au texte sélectionné, à partir de là, vous pouvez faire quelques gestes pour le manipuler.

En savoir plus: Developer Mozilla DOM Selection

Zuul
la source
-1

ajoutez ceci à votre script pour empêcher le clic droit et la sélection de texte.

Des exceptions peuvent être ajoutées à 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;}
user2180104
la source