Klartextauswahl mit JavaScript

121

Einfache Frage, auf die ich keine Antwort finden kann: Wie kann ich JavaScript (oder jQuery) verwenden, um die Auswahl von Text aufzuheben, der auf einer Webseite ausgewählt werden kann? EG-Benutzer klickt und zieht, um ein bisschen Text hervorzuheben - ich möchte eine Funktion deselectAll () haben, die diese Auswahl löscht. Wie soll ich es schreiben?

Danke für die Hilfe.

man1
quelle

Antworten:

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

Gutschrift an Herrn Y.

Gert Grenander
quelle
4
Dies setzt voraus, dass die Existenz von document.selectiondie Existenz einer empty()Methode davon impliziert . Sie haben die Methode in jedem anderen Fall getestet, also können Sie sie auch emptyim letzten Fall testen .
Tim Down
Ich habe dies in meinem Plugin jquery.tableCheckbox.js verwendet , danke.
Marco Kerwitz
1
Ich habe ein voll funktionsfähiges Beispiel basierend auf Ihrem Vorschlag erstellt, aber einige Extras hinzugefügt. Jsfiddle.net/mkrivan/hohx4nes Die wichtigste Zeile ist window.getSelection (). AddRange (document.createRange ()); Ohne diesen IE wird die Auswahl von Text unter bestimmten Bedingungen nicht aufgehoben. Und ich habe die Reihenfolge der Methodenerkennung geändert.
Miklos Krivan
Du rettest meinen Tag, mein Freund! Ich habe Scratchpad verwendet und beim Scratchen wurde die gesamte Seite ausgewählt. Mit diesem guten Skript habe ich die Auswahl meiner Seite aufgehoben, bevor ich das Scratchpad-Plugin verwendet habe. Grundsätzlich funktioniert es! Vielen Dank!
Kombinieren Sie
1
Ich fount, das window.getSelection().removeAllRanges();funktioniert gut in IE (Rand) und Safari.
Chile
48

Testen Sie die gewünschten Funktionen am besten direkt:

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

Stand der Abwahl 2014

Ich habe selbst recherchiert. Hier ist die Funktion, die ich geschrieben habe und die ich heutzutage benutze:

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

Grundsätzlich getSelection().removeAllRanges()wird derzeit von allen modernen Browsern (einschließlich IE9 +) unterstützt. Dies ist eindeutig die richtige Methode für die Zukunft.

Kompatibilitätsprobleme wurden berücksichtigt:

  • Alte Versionen von Chrome und Safari verwendet getSelection().empty()
  • IE8 und darunter verwendet document.selection.empty()

Aktualisieren

Es ist wahrscheinlich eine gute Idee, diese Auswahlfunktion für die Wiederverwendung zusammenzufassen.

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

Ich habe dies zu einem Community-Wiki gemacht, damit Sie den Benutzern Funktionen hinzufügen oder Dinge aktualisieren können, wenn sich die Standards weiterentwickeln.

ChaseMoskal
quelle
7
Das ist das Gleiche wie meine Antwort. In 4 Jahren hat sich nichts geändert.
Tim Down
3
Schrecklich. Sie haben die Implementierung nicht nur buchstäblich von einem anderen Poster gestohlen, sondern sie auch syntaktisch komplett verworfen.
Kamelkev
1

Hier ist die akzeptierte Antwort, jedoch in zwei Codezeilen:

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

Die einzige prüfe ich nicht tun , ist für die Existenz von removeAllRanges - aber AFAIK gibt es keinen Browser, der entweder hat window.getSelectionoder document.selectionaber nicht haben entweder ein .emptyoder .removeAllRangesfür diese Eigenschaft.

Grinn
quelle
0

Mit window.getSelection () können Sie auf den ausgewählten Text zugreifen. Von dort aus können Sie einige Dinge tun, um ihn zu bearbeiten.

Lesen Sie mehr: Entwickler Mozilla DOM Auswahl

Zuul
quelle
-1

Fügen Sie dies Ihrem Skript hinzu, um Rechtsklicks und Textauswahl zu vermeiden.

Ausnahmen können zu var 'om' hinzugefügt werden.

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
quelle