Mikor szabad letiltani a szövegkijelölést?

A CSS használatával megakadályozható, hogy a felhasználók szöveget válasszanak ki egy elemen belül user-select: none. Most már érthető, hogy ez miért tekinthető „ellentmondásosnak”. Értem, kellene letiltjuk a szokásos felhasználói viselkedést? Általánosságban elmondható, hogy nem, nem kellene ezt tennünk. De a szövegkijelölés letiltásának van néhány legitim (bár ritka) használati esete? Azt hiszem.

Ebben a cikkben megvizsgáljuk ezeket a használati eseteket, és megnézzük, hogyan használhatjuk őket user-select: none a felhasználói élmény javítása (nem akadályozása) érdekében. Az sem ér semmit, hogy a user-select az ingatlannak ezen kívül más értékei is vannak none amely a szövegkijelölés viselkedésének megváltoztatására használható, nem pedig teljes letiltására, és egy másik érték, amely akár érvényesíti szövegkijelölést, ezért ezeket is megnézzük.

Lehetséges user-select értékek

Indítsuk el a dolgokat azzal, hogy átfutjuk a különböző dolgokat user-select értékeket és azt, amit csinálnak.

Alkalmazása user-select: none; egy elemhez azt jelenti, hogy annak szövegtartalma és beágyazott szövegtartalma nem lesz funkcionálisan vagy vizuálisan kiválasztható (pl. ::selection nem fog működni). Ha olyan kijelölést végezne, amely nem választható tartalmat tartalmaz, akkor a nem kiválasztható tartalom kimaradna a kijelölésből, tehát meglehetősen jól van megvalósítva. És a támogatás nagyszerű.

Hátrányosan, user-select: text kiválaszthatóvá teszi a tartalmat. Ezt az értéket használja a felülíráshoz user-select: none.

user-select: contain egy érdekes. Alkalmazása azt jelenti, hogy ha egy kijelölés az elemen belül kezdődik, akkor abban is be kell fejeződnie, tartalmazva azt. Ez furcsa módon nem érvényes a kiválasztás kezdetén előtt az elem azonban valószínűleg ezért nem támogatja jelenleg egyetlen böngésző sem. (Az Internet Explorer és a Microsoft Edge korábbi verziói korábban támogatták a user-select: element.)

A user-select: all, az elem tartalmának egy részének kijelölése az összes elemet automatikusan kiválasztja. Mindent vagy semmit, ami nagyon kompromisszumok nélküli, de hasznos olyan esetekben, amikor a felhasználók nagyobb valószínűséggel másolnak tartalmat a vágólapra (pl. linkek, kódrészletek megosztása és beágyazása stb.). A dupla kattintás helyett a felhasználóknak csak egyszer kell kattintaniuk a tartalom automatikus kiválasztásához.

Legyen azonban óvatos, mert ez nem mindig az a funkció, amelyet Ön annak gondol. Mi van akkor, ha a felhasználók csak választani akarnak rész a tartalomból (pl. a Google Fonts kódrészletnek csak a betűtípusnév része vagy a kódrészlet egy része)? Még mindig jobb kezelni”másolja a vágólapra” sok esetben JavaScript használatával.

Egy jobb alkalmazása user-select: all annak biztosítása, hogy az árajánlatokat teljes mértékben és pontosan lemásolják.

- viselkedése user-select: auto (a kezdeti értéke user-select) az elemtől és a használat módjától függ. Erről bővebben itt tájékozódhat a mi almanachunk.

Most térjünk rá a felhasználási esetek feltárására user-select: none...

A nem szöveg eltávolítása a kijelölésből

Amikor tartalmat másol egy weboldalról, az valószínűleg egy cikkből vagy más típusú hosszú formátumú tartalomból származik, igaz? Valószínűleg nem szeretné, hogy a kiválasztásban szerepeljenek képek, hangulatjelek (amelyek néha szövegként másolhatók, pl. „:thhinkingface:”), és egyéb olyan dolgok, amelyekre számíthat. <aside> elem (pl. cikken belüli cselekvésre ösztönzés, hirdetések vagy valami más, ami nem része a fő tartalomnak).

Annak elkerülése érdekében, hogy valami bekerüljön a kijelölésekbe, győződjön meg arról, hogy az egy HTML elembe van csomagolva, majd alkalmazza user-select: none hozzá:

<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>

Az ilyen helyzetekben nem tiltjuk le a kijelölést, hanem inkább optimalizálása azt. Azt is érdemes megemlíteni, hogy a kijelölés nem feltétlenül másolást jelent – ​​sok olvasó (beleértve én is) szereti olvasás közben kiválasztani a tartalmat, hogy emlékezzen, hol van (például egy könyvjelző), ami egy másik ok az optimalizálásra, nem pedig a teljes letiltásra.

A véletlen kiválasztás megelőzése

alkalmaz user-select: none gomboknak tűnő linkekre (pl <a href="/hu/whatever" class="button">Click Me!</a>).

Nem lehet kiválasztani a szöveges tartalmat <button> or <input type="submit"> mert hát miért tenné? Ez a viselkedés azonban nem vonatkozik a hivatkozásokra, mert hagyományosan egy bekezdés részét képezik, amelyet ki kell választani.

Elfogadható.

Ezzel vitatkozhatnánk a hivatkozások gombnak való kinézete antiminta, de bármi. Nem bontja meg az internetet, ugye? Ez a hajó egyébként is elhajózott, tehát ha olyan hivatkozásokat használ, amelyek gomboknak látszanak, akkor azoknak a gombok viselkedését kell utánozniuk, nem csak a következetesség érdekében, hanem azért is, hogy megakadályozzák a felhasználók véletlenül a tartalmat az interakció elindítása helyett.

Minden bizonnyal hajlamos vagyok véletlenül kiválasztani dolgokat, mivel többet használom a laptopomat az ágyban, mint amennyit bevallom. Ezenkívül számos egészségügyi állapot befolyásolhatja az irányítást és a koordinációt, és a szándékolt kattintást nem szándékos húzássá/kiválasztássá változtatja, így vannak olyan hozzáférhetőségi problémák, amelyek orvosolhatók user-select túl.

Természetesen léteznek (szándékosan) húzást igénylő interakciók is (pl. böngészős játékokban), de ezek nem gyakoriak. Mégis csak ezt mutatja user-select valójában jó néhány használati esete van.

A fizetős tartalomlopások elkerülése

A fizetős tartalom sok gyűlöletet kap, de ha úgy érzed, hogy meg kell védened a tartalmat, akkor az a te tartalmad – senkinek sincs joga ellopni, csak azért, mert nem hiszi el, hogy fizetnie kellene érte.

Ha ezt az utat szeretné követni, sokféleképpen megnehezítheti a felhasználók számára a fizetőfalak megkerülését (vagy hasonló módon a szerzői jog által védett tartalmak, például mások publikált munkáinak másolását).

A tartalom elmosása CSS-sel:

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

A DevTools billentyűparancsainak letiltása:

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

A DevToolshoz való hozzáférés letiltása a helyi menün keresztül magának a helyi menünek a letiltásával:

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

És természetesen annak megakadályozása érdekében, hogy a felhasználók lemásolják a tartalmat, amikor a forrásnál nem olvassák el, jelentkezzen user-select: none:

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

Egyéb felhasználási esetek?

Ez az a három felhasználási eset, amelyre gondolhattam a szövegkiválasztás megakadályozására. Többen is megfordultak a fejemben, de mindegyik húzósnak tűnt. De mi van veled? Ki kellett kapcsolnia a szövegkiválasztást valamin? Szeretném tudni!