Wyczyść zaznaczenie tekstu za pomocą JavaScript

123

Proste pytanie, na które nie mogę znaleźć odpowiedzi: jak za pomocą JavaScript (lub jQuery) odznaczyć dowolny tekst, który może być zaznaczony na stronie internetowej? Użytkownik EG klika i przeciąga, aby podświetlić fragment tekstu - chcę mieć funkcję deselectAll (), która czyści ten wybór. Jak mam go napisać?

Dzięki za pomoc.

man1
źródło

Odpowiedzi:

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

Kredyt dla pana Y.

Gert Grenander
źródło
4
Zakłada się, że istnienie document.selectionimplikuje istnienie empty()metody. Testowałeś tę metodę w każdym innym przypadku, więc równie dobrze możesz przetestować ją również emptyw ostatnim przypadku.
Tim Down
Użyłem tego w mojej wtyczce jquery.tableCheckbox.js , dzięki.
Marco Kerwitz
1
Stworzyłem pełny działający przykład na podstawie Twojej sugestii, ale dodając kilka dodatków jsfiddle.net/mkrivan/hohx4nes Najważniejszą linią jest window.getSelection (). AddRange (document.createRange ()); Bez tego IE nie usuwa zaznaczenia tekstu w pewnych warunkach. I zmieniłem kolejność wykrywania metody.
Miklos Krivan
Ocal mój dzień, przyjacielu! Używałem brudnopisu i podczas drapania całej strony został wybrany i za pomocą tego dobrego skryptu odznaczam moją stronę przed użyciem wtyczki scratchpad. W zasadzie to działa! Wielkie dzięki!
Połącz
1
Odkryłem, że window.getSelection().removeAllRanges();działa dobrze w IE (edge) i Safari.
chile,
49

Najlepiej przetestować funkcje, które chcesz bezpośrednio:

var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
    if (sel.removeAllRanges) {
        sel.removeAllRanges();
    } else if (sel.empty) {
        sel.empty();
    }
}
Tim Down
źródło
15

Stan spraw związanych z usunięciem selekcji 2014

Zrobiłem własne badania. Oto funkcja, którą napisałem i używam obecnie:

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

Zasadniczo getSelection().removeAllRanges()jest obecnie obsługiwany przez wszystkie nowoczesne przeglądarki (w tym IE9 +). Jest to oczywiście właściwa metoda posuwania się naprzód.

Uwzględniono problemy ze zgodnością:

  • Użyto starych wersji Chrome i Safari getSelection().empty()
  • Używany IE8 i starsze document.selection.empty()

Aktualizacja

Prawdopodobnie dobrym pomysłem jest zamknięcie tej funkcji wyboru do ponownego wykorzystania.

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

Stworzyłem to wiki społeczności, abyście mogli dodawać do tego funkcje lub aktualizować rzeczy w miarę ewolucji standardów.

ChaseMoskal
źródło
7
Robi to samo, co moja odpowiedź. Nic się nie zmieniło od 4 lat.
Tim Down
3
Okropny. Nie tylko dosłownie ukradłeś implementację z innego plakatu, ale całkowicie zniszczyłeś ją syntaktycznie.
kamelkev
1

Oto akceptowana odpowiedź, ale w dwóch wierszach kodu:

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

Jedynym sprawdzić nie robię to na istnienie removeAllRanges - ale AFAIK nie jest przeglądarką, która ma albo window.getSelectionczy document.selectionjednak nie ma albo .emptyczy .removeAllRangesdla tej nieruchomości.

Grinn
źródło
0

Funkcja window.getSelection () umożliwia dostęp do zaznaczonego tekstu, a stamtąd można zrobić kilka rzeczy, aby nim manipulować.

Czytaj więcej: Deweloper Mozilla DOM Selection

Zuul
źródło
-1

dodaj to do swojego skryptu, aby zapobiec klikaniu prawym przyciskiem i wybieraniu tekstu.

Wyjątki można dodać do zmiennej „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
źródło