Wie kann ich die Textauswahl auf meiner HTML-Seite verhindern?

Textauswahl auf einer HTML-Seite aufheben: Eine umfassende Anleitung

Im Bereich der Benutzererfahrung kann es wünschenswert sein, die Textauswahl zu verhindern bestimmte Elemente innerhalb einer HTML-Seite. Dies gilt insbesondere für Elemente wie Tab-Namen, die bei Hervorhebung unattraktiv wirken können.

CSS-Lösung

Glücklicherweise bieten die meisten modernen Browser eine CSS-basierte Lösung:

*.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;

  /* IE 10+ */
  -ms-user-select: none;
  user-select: none;
}

Fügen Sie diesen Code einfach zu Ihrem Stylesheet hinzu, und schon werden die bezeichneten Elemente angezeigt nicht auswählbar.

IE- und Opera-Alternative

Für frühere Versionen von Internet Explorer und Opera kann das nicht auswählbare Attribut verwendet werden:

<div>

Allerdings Beachten Sie, dass dieses Attribut nicht vererbt wird. Daher müssen Sie es möglicherweise für jeden Nachkommen explizit festlegen Element.

Rekursive JavaScript-Lösung

Wenn Sie auf Vererbungsprobleme stoßen, können Sie JavaScript verwenden, um das nicht auswählbare Attribut rekursiv anzuwenden:

function makeUnselectable(node) {
  if (node.nodeType == 1) {
    node.setAttribute("unselectable", "on");
  }
  var child = node.firstChild;
  while (child) {
    makeUnselectable(child);
    child = child.nextSibling;
  }
}

makeUnselectable(document.getElementById("foo"));

Das obige ist der detaillierte Inhalt vonWie kann ich die Textauswahl auf meiner HTML-Seite verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!