Alle auswählen

Ich vermute, es ist nicht weithin bekannt, dass CSS steuern kann, wie Text ausgewählt wird. Sie können user-select: none; verwenden, um die Auswahl von Text zu verhindern. Das ist wahrscheinlich im Allgemeinen kein besonders gutes UX, aber vielleicht verwenden Sie einige Punktzeichen (.) als Dekoration oder so etwas, und ich kann mir vorstellen, dass Sie verhindern möchten, dass diese ausgewählt werden.

Das genaue Gegenteil ist user-select: all;, was erzwingt, dass der gesamte Text in einem Element ausgewählt wird. Auch hier ist die UX wahrscheinlich etwas fragwürdig. Jemanden zu zwingen, den gesamten Text auszuwählen, ist im Web eher selten, und jemanden aktiv daran zu hindern, einen Teil davon auszuwählen, fühlt sich an, als würde man zu sehr versuchen, hilfreich zu sein, bis zu dem Punkt, an dem es tatsächlich schadet.

Wie auch immer, hier ist Dag Frode Solberg mit mehr Details.

Ich habe seine Demo hier geforkt, um ein einfaches Szenario zu zeigen, in dem "Klick zum Auswählen" in gewissem Maße sinnvoll sein könnte

Siehe den Stift
css/user-select/4 von Chris Coyier (@chriscoyier)
auf CodePen.

Wenn Sie eine Situation implementieren möchten, in der Sie einmal klicken, um alles hervorzuheben, und dann die Einmischung stoppen, könnten Sie das in JavaScript mit einem Click-Handler tun, der sich nach dem ersten Klick selbst entfernt.

const cells = document.querySelectorAll("td");

function highlight(event) {
  window.getSelection()
    .selectAllChildren(
      event.target
    );
  event.target.removeEventListener("click", highlight);
}

cells.forEach(cell => {
  cell.addEventListener("click", highlight);
});

Direkter Link →