Cancella la selezione del testo con JavaScript


123

Domanda semplice a cui non riesco a trovare risposta: come posso utilizzare JavaScript (o jQuery) per deselezionare qualsiasi testo che può essere selezionato su una pagina web? Ad esempio, l'utente fa clic e trascina per evidenziare un po 'di testo - Voglio avere una funzione deselectAll () che cancella questa selezione. Come dovrei scriverlo?

Grazie per l'aiuto.

Risposte:


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

Ringraziamo il signor Y.


4
Ciò presuppone che l'esistenza di document.selectionimplica l'esistenza di un empty()metodo di esso. Hai testato il metodo in ogni altro caso, quindi potresti anche testarlo emptynel caso finale.
Tim Down

Ho usato questo nel mio plugin jquery.tableCheckbox.js , grazie.
Marco Kerwitz

1
Ho creato un esempio funzionante completo basato sul tuo suggerimento ma aggiungendo alcuni extra jsfiddle.net/mkrivan/hohx4nes La riga più importante è window.getSelection (). AddRange (document.createRange ()); Senza questo IE non deseleziona il testo in alcune condizioni. E ho cambiato l'ordine del rilevamento del metodo.
Miklos Krivan

Mi salvi la giornata amico mio! Stavo usando il blocco appunti e quando ho selezionato l'intera pagina è stato selezionato e con questo buon script deseleziono la mia pagina prima di utilizzare il plugin del blocco note. Fondamentalmente funziona! Molte grazie!
Combina

1
Ho scoperto che window.getSelection().removeAllRanges();funziona bene in IE (edge) e Safari.
Cile

48

È meglio testare le funzionalità desiderate direttamente:

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

15

Stato degli affari di deselezione 2014

Ho fatto delle ricerche per conto mio. Ecco la funzione che ho scritto e che sto usando in questi giorni:

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

Fondamentalmente, getSelection().removeAllRanges()è attualmente supportato da tutti i browser moderni (incluso IE9 +). Questo è chiaramente il metodo corretto per andare avanti.

Problemi di compatibilità spiegati:

  • Vecchie versioni di Chrome e Safari utilizzate getSelection().empty()
  • IE8 e precedenti utilizzati document.selection.empty()

Aggiornare

Probabilmente è una buona idea racchiudere questa funzionalità di selezione per il riutilizzo.

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

Ho creato un wiki della comunità in modo che le persone possano aggiungere funzionalità a questo o aggiornare le cose man mano che gli standard si evolvono.


7
Questo sta facendo lo stesso della mia risposta. Niente è cambiato in 4 anni.
Tim Down

3
Orribile. Non solo hai letteralmente rubato l'implementazione da un altro poster, ma l'hai completamente cestinata sintatticamente.
kamelkev

1

Ecco la risposta accettata, ma in due righe di codice:

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

L'unico controllo che non faccio è l'esistenza di removeAllRanges, ma AFAIK non esiste un browser che abbia window.getSelectiono document.selectionma non abbia .emptyo .removeAllRangesper quella proprietà.



-1

aggiungilo al tuo script per impedire il clic destro e la selezione del testo.

È possibile aggiungere eccezioni 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;}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.