Teksto pasirinkimo paryškinimo išjungimo vadovas

Temp mail SuperHeros
Teksto pasirinkimo paryškinimo išjungimo vadovas
Teksto pasirinkimo paryškinimo išjungimo vadovas
Lucas Simon
2024 m. birželio 12 d., trečiadienis 16:10:12

Nepageidaujamo teksto pasirinkimo prevencija

Prietaisai, kurie veikia kaip mygtukai, pvz., esantys Stack Overflow šoninėje juostoje (klausimai, žymos ir vartotojai), gali būti nemalonu, kai naudotojai netyčia paryškina tekstą. Taip dažnai nutinka, kai šie elementai naudojami naršymui ar veiksmams, kai tekstas pasirenkamas netyčia.

Nors „JavaScript“ siūlo sprendimus, neleidžiančius pasirinkti teksto, pravartu žinoti, ar CSS yra standartą atitinkantis metodas. Šiame straipsnyje nagrinėjama, kaip išjungti teksto pasirinkimo paryškinimą naudojant CSS, ir aptariamos geriausios praktikos, kaip pasiekti šį efektą.

komandą apibūdinimas
-webkit-user-select CSS ypatybė, skirta išjungti teksto pasirinkimą „Safari“ naršyklėse.
-moz-user-select CSS ypatybė, skirta išjungti teksto pasirinkimą „Firefox“ naršyklėse.
-ms-user-select CSS ypatybė, skirta išjungti teksto pasirinkimą „Internet Explorer 10“ ar naujesnėse versijose.
user-select Standartinė CSS ypatybė, skirta išjungti teksto pasirinkimą šiuolaikinėse naršyklėse.
onselectstart „JavaScript“ įvykių tvarkyklė, neleidžianti pasirinkti teksto elemente.
querySelectorAll „JavaScript“ metodas, skirtas pasirinkti visus elementus, atitinkančius nurodytą parinktuvų grupę.

Teksto pasirinkimo išjungimo scenarijų supratimas

Norėdami išjungti teksto pasirinkimo paryškinimą naudojant CSS, taikome -webkit-user-select, -moz-user-select, -ms-user-select, ir user-select savybių. Šios ypatybės skirtos skirtingoms naršyklėms ir užtikrina kelių naršyklių suderinamumą. Nustatydami šias savybes į none, teksto pasirinkimas išjungtas, todėl naudotojai negali paryškinti teksto elementuose su no-select klasė.

„JavaScript“ pavyzdyje prie dokumento pridedame įvykių klausytoją, kuris vykdomas, kai visiškai įkeliamas DOM turinys. The querySelectorAll metodas parenka visus elementus su no-select klasė. Kiekvienam pasirinktam elementui onselectstart įvykis nepaisomas, kad būtų grąžintas false, neleidžiantis pasirinkti teksto. Šis CSS ir JavaScript derinys užtikrina patikimą sprendimą išjungti teksto pasirinkimą įvairiose naršyklėse ir scenarijuose.

CSS būdas išjungti teksto pasirinkimą

CSS naudojimas norint išjungti teksto pasirinkimą

/* CSS to disable text selection */
.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10+ */
  user-select: none;         /* Standard */
}

„JavaScript“ metodas, skirtas užkirsti kelią teksto pasirinkimui

„JavaScript“ sprendimas, skirtas išjungti teksto pasirinkimą

/* JavaScript to disable text selection */
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('.no-select').forEach((element) => {
    element.onselectstart = function() {
      return false;
    };
  });
});

CSS ir HTML derinimas praktiniam pritaikymui

Praktinis pavyzdys su CSS ir HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .no-select {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE 10+ */
    user-select: none;         /* Standard */
  }
</style>
</head>
<body>
<div class="no-select">Non-selectable text</div>
</body>
</html>

Kitų sprendimų ieškojimas

Kitas būdas užkirsti kelią teksto pasirinkimui žiniatinklio programose yra naudoti draggable atributas HTML. Šis atributas, kai nustatytas į false, užtikrina, kad elemento nebūtų galima pasirinkti ar vilkti, suteikdamas kitą vartotojo sąveikos valdymo lygmenį. Tai gali būti ypač naudinga naudojant interaktyvius elementus, pvz., mygtukus ir skirtukus, kurie neturėtų būti paryškinti arba netyčia perkelti.

Be to, pointer-events Galima naudoti CSS nuosavybę. Pagal nustatymą pointer-events: none, galite padaryti elemento tekstą nepasirenkamą. Tačiau šis metodas taip pat išjungia kitas sąveikas, pvz., spustelėjimą, o tai gali būti nepageidautina visais naudojimo atvejais. Renkantis tinkamą metodą labai svarbu suderinti patogumą ir funkcionalumą.

Dažni klausimai ir sprendimai

  1. Kaip galiu užkirsti kelią teksto pasirinkimui naudojant CSS?
  2. Naudoti user-select nustatyta nuosavybė none norimiems elementams.
  3. Ar yra „JavaScript“ metodas, leidžiantis išjungti teksto pasirinkimą?
  4. Taip, nustatydami onselectstart sugrįžti įvykis false apie tikslinius elementus.
  5. Kas yra -webkit-user-select nuosavybė?
  6. Tai CSS nuosavybė, naudojama norint išjungti teksto pasirinkimą „Safari“ ir „Chrome“ naršyklėse.
  7. Ar galiu naudoti pointer-events neleisti pasirinkti teksto?
  8. Taip, nustatymas pointer-events į none gali neleisti pasirinkti teksto, bet taip pat išjungti kitas sąveikas.
  9. Ką daro draggable atributas daryti?
  10. The draggable atributas, kai nustatyta false, neleidžia pasirinkti ar vilkti elementų.
  11. Ar yra būdas taikyti visas naršykles naudojant CSS?
  12. Naudoti -webkit-user-select, -moz-user-select, -ms-user-select, ir user-select savybės kartu.
  13. Ar yra kokių nors minusų išjungiant teksto pasirinkimą?
  14. Išjungus teksto pasirinkimą gali pagerėti interaktyvių elementų naudotojo patirtis, tačiau kai kuriems naudotojams gali būti trukdoma pasiekti.
  15. Ar galima išjungti teksto pasirinkimą tik tam tikriems elementams?
  16. Taip, ypatybes arba įvykių tvarkykles galite taikyti konkretiems elementams, pvz., mygtukams ar skirtukams.
  17. Kokie yra geriausi teksto pasirinkimo išjungimo būdai?
  18. Sujunkite CSS ir JavaScript metodus, kad būtų suderinamos įvairios naršyklės ir nebūtų pažeistas naudojimo būdas.

Paskutinės mintys apie teksto pasirinkimo išjungimą

Neleidžiant paryškinti teksto, pagerėja interaktyvių žiniatinklio elementų naudojimas. Naudojant CSS savybes, pvz user-select kartu su naršyklės priešdėliais užtikrina suderinamumą visose pagrindinėse naršyklėse. Be to, „JavaScript“ įtraukimas į teksto pasirinkimą yra patikimas sprendimas. Tinkamai įdiegus šiuos metodus, pagerėja vartotojo patirtis, nes neleidžia atsitiktinai pasirinkti teksto elementuose, kurie veikia kaip mygtukai arba skirtukai, ir užtikrina sklandų sąveiką be nepageidaujamo paryškinimo.