Millal saab tekstivaliku keelata?

CSS-i kasutades on võimalik takistada kasutajatel elemendi sees teksti valimast user-select: none. Nüüd on arusaadav, miks seda võib pidada vastuoluliseks. Ma mõtlen, peaks keelame tavapärase kasutajakäitumise? Üldiselt ei, me ei peaks seda tegema. Kuid kas tekstivaliku keelamisel on mõned õigustatud (ehkki harvad) kasutusjuhtumid? Ma arvan küll.

Selles artiklis uurime neid kasutusjuhtumeid ja vaatame, kuidas saaksime seda kasutada user-select: none kasutajakogemuse parandamiseks (mitte takistamiseks). Samuti pole midagi väärt, et user-select varal on peale selle ka muid väärtusi none mida saab kasutada tekstivaliku käitumise muutmiseks, mitte selle täielikuks keelamiseks, ja veel üks väärtus, mis isegi sunnib tekstivalik, nii et vaatame ka neid.

Võimalik user-select väärtused

Paneme asjad käima, läbides erinevaid user-select väärtusi ja mida nad teevad.

Rakendades user-select: none; elemendile tähendab, et selle tekstisisu ja pesastatud tekstisisu ei ole funktsionaalselt ega visuaalselt valitavad (st ::selection ei tööta). Kui teeksite valiku, mis sisaldas mõnda mittevalitavat sisu, jäetakse mittevalitav sisu valikust välja, seega on see üsna hästi rakendatud. Ja toetus on suur.

Kahjuks user-select: text muudab sisu valitavaks. Seda väärtust kasutaksite ülekirjutamiseks user-select: none.

user-select: contain on huvitav. Selle rakendamine tähendab, et kui valik algab elemendi sees, peab see ka selle sees lõppema, sisaldades seda. Kummalisel kombel ei kehti see valiku alguses enne element, aga ilmselt seetõttu ükski brauser seda praegu ei toeta. (Internet Explorer ja Microsoft Edge'i varasemad versioonid toetasid seda varem varjus user-select: element.)

koos user-select: all, valides osa elemendi sisust, valitakse see kõik automaatselt. See on kõik või mitte midagi, mis on väga kompromissitu, kuid kasulik olukordades, kus kasutajad kopeerivad tõenäolisemalt sisu oma lõikelauale (nt linkide, koodilõikude jagamine ja manustamine jne). Topeltklõpsamise asemel peavad kasutajad sisu automaatseks valimiseks klõpsama vaid üks kord.

Olge siiski ettevaatlik, kuna see ei ole alati see funktsioon, mida arvate. Mis siis, kui kasutajad tahavad ainult valida osa sisust (nt ainult Google Fontsi koodilõigu fondi nime osa või koodilõigu üks osa)? Sellega on ikka parem hakkama saada”kopeerida lõikelauale”, kasutades JavaScripti paljudes stsenaariumides.

Parem rakendus user-select: all eesmärk on tagada tsitaatide täielik ja täpne kopeerimine.

Käitumine user-select: auto (algväärtus user-select) oleneb elemendist ja selle kasutamise viisist. Selle kohta saate lisateavet jaotisest meie almanahh.

Nüüd pöördume kasutusjuhtude uurimise poole user-select: none...

Mitteteksti eemaldamine valikust

Kui kopeerite sisu veebilehelt, on see tõenäoliselt pärit artiklist või mõnest muust pikaajalisest sisust, eks? Tõenäoliselt ei taha te, et teie valik sisaldaks pilte, emotikone (mis võib mõnikord tekstina kopeerida, nt ":thhinkingface:") ja muid asju, mida võiksite leida <aside> element (nt artiklisisesed kutsed tegevusele, reklaamid või midagi muud, mis ei kuulu põhisisu hulka).

Et vältida millegi valikutesse kaasamist, veenduge, et see on mähitud HTML-elemendi sisse ja seejärel rakendage user-select: none sellele:

<p>lorem <span style="user-select: none">🤔</span> ipsum</p>

<aside style="user-select: none">
  <h1>Heading</h1>
  <p>Paragraph</p>
  <a>Call to action</a>
</aside>

Selliste stsenaariumide puhul ei keela me valikut, vaid pigem optimeerimine seda. Samuti tasub mainida, et valimine ei tähenda tingimata kopeerimist – paljudele lugejatele (kaasa arvatud mulle) meeldib sisu lugemise ajal valida, et nad mäletaksid, kus nad asuvad (näiteks järjehoidja), mis on veel üks põhjus optimeerimiseks, mitte täielikuks keelamiseks.

Juhusliku valiku vältimine

kehtima user-select: none linkidele, mis näevad välja nagu nupud (nt <a href="/et/whatever" class="button">Click Me!</a>).

A teksti sisu pole võimalik valida <button> or <input type="submit"> sest noh, miks sa seda teeksid? See käitumine aga linkide puhul ei kehti, kuna traditsiooniliselt moodustavad need lõigu osa, mis peaks olema valitav.

Õiglane.

Võiksime selle vastu vaielda linkide nööpideks muutmine on mustervastane, aga vahet pole. See ei riku internetti, kas pole? See laev on niikuinii sõitnud, nii et kui kasutate nuppude moodi väljanägemisega linke, peaksid need jäljendama nuppude käitumist mitte ainult järjepidevuse huvides, vaid ka selleks, et kasutajad ei saaks interaktsiooni käivitamise asemel kogemata sisu valida.

Kindlasti valin ma asju kogemata, kuna kasutan oma sülearvutit voodis rohkem, kui tunnistan. Lisaks on mitu meditsiinilist seisundit, mis võivad mõjutada juhtimist ja koordineerimist, muutes kavandatud klõpsu tahtmatuks lohistamiseks/valikuks, seega on juurdepääsetavuse probleeme, mida saab lahendada user-select ka.

Muidugi on olemas ka (tahtlikult) lohistamist nõudvad vastasmõjud (nt brauserimängudes), kuid need on haruldased. Ometi see lihtsalt näitab seda user-select tegelikult on sellel üsna palju kasutusjuhtumeid.

Tasulise sisu varguse vältimine

Tasulise sisuga sisu saab palju vihkamist, kuid kui tunnete, et peate oma sisu kaitsma, on see teie sisu – kellelgi pole õigust seda varastada lihtsalt sellepärast, et ta ei usu, et peaks selle eest maksma.

Kui soovite seda teed mööda minna, on palju viise, kuidas muuta kasutajatel makseseintest mööda hiilimine keerulisemaks (või sarnaselt autoriõigustega kaitstud sisu, näiteks teiste avaldatud teoste kopeerimiseks).

Sisu hägustamine CSS-iga:

article { filter: blur(<radius>); }

DevToolsi klaviatuuri otseteede keelamine:

document.addEventListener("keydown", function (e) {
  if (e.keyCode == 123) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});

DevToolsile juurdepääsu keelamine kontekstimenüü kaudu, keelates kontekstimenüü enda:

document.addEventListener("contextmenu", e => e.preventDefault())

Ja muidugi selleks, et takistada kasutajatel sisu kopeerimist, kui neil pole lubatud seda allikas lugeda, esitage taotluse user-select: none:

<article style="user-select: none">

Kas on muid kasutusjuhtumeid?

Need on kolm kasutusjuhtu, mida võiksin tekstivaliku takistamiseks mõelda. Mitmed teised tulid mulle pähe, kuid need kõik tundusid olevat venitus. Aga kuidas on lood sinuga? Kas olete pidanud millegi puhul tekstivaliku keelama? Ma tahaksin teada!