CSS vadovas: išjunkite teksto pasirinkimo paryškinimą

Teksto pasirinkimo išjungimo įvadas

Prietaisams, kurie veikia kaip mygtukai, pvz., Stack Overflow šoninėje juostoje esantys mygtukai, pavadinti Klausimai, žymos ir vartotojai, neleisdami paryškinti teksto, galite pagerinti naudotojo patirtį. Taip užtikrinama, kad atsitiktinis teksto pasirinkimas neblaškytų vartotojų dėmesio.

Nors yra „JavaScript“ sprendimų, dažnai geriau rasti CSS standartinį metodą. Šiame straipsnyje nagrinėjama, ar galimas su CSS suderinamas metodas ir kokia geriausia praktika, jei nėra standartinio sprendimo.

Supratimas, kaip išjungti teksto pasirinkimą

CSS scenarijus naudoja kelias ypatybes, kad išjungtų teksto pasirinkimą. The -webkit-user-select, -moz-user-select, ir -ms-user-select ypatybės yra konkrečios naršyklės komandos, kurios neleidžia pasirinkti teksto atitinkamai naršyklėse „Chrome“, „Safari“, „Opera“, „Firefox“, „Internet Explorer“ ir „Edge“. The user-select nuosavybė yra standartizuota versija, kurią palaiko šiuolaikinės naršyklės. Šios komandos taikomos inkaro žymoms, veikiančioms kaip mygtukai, siekiant užtikrinti, kad vartotojai negalėtų netyčia paryškinti teksto, taip išsaugoma mygtukų funkcija be vizualinių trikdžių.

„JavaScript“ scenarijus dar labiau pagerina vartotojo patirtį, įtraukdamas įvykių klausytojus prie inkaro elementų. The addEventListener metodas pritvirtinamas mousedown ir selectstart įvykius į elementus, užkertant kelią numatytiems veiksmams naudojant preventDefault. Tai užtikrina, kad net jei vartotojas bando pasirinkti tekstą spustelėdamas ir vilkdamas, teksto pasirinkimas bus užblokuotas. Šis kombinuotas metodas, naudojant tiek CSS, tiek JavaScript, užtikrina patikimą nepageidaujamo teksto pasirinkimo prevenciją įvairiose naršyklėse ir naudotojų sąveikose.

/* CSS to disable text selection */
a.button {
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Non-prefixed version, currently supported by Chrome, Edge, Opera, and Firefox */
}

/* Apply the class to anchor tags acting as buttons */
a.button {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
}

<script>
// JavaScript to disable text selection for specific elements
document.querySelectorAll('a.button').forEach(function(el) {
  el.addEventListener('mousedown', function(e) {
    e.preventDefault(); // Prevents text selection on mousedown
  });
  el.addEventListener('selectstart', function(e) {
    e.preventDefault(); // Prevents text selection on drag
  });
});
</script>

Naršyklės suderinamumo ir geriausios praktikos tyrinėjimas

Kitas svarbus aspektas, į kurį reikia atsižvelgti išjungiant prierašo elementų teksto pasirinkimo paryškinimą, yra naršyklės suderinamumas ir atsarginiai sprendimai. Kol user-select nuosavybė yra plačiai palaikoma šiuolaikinėse naršyklėse, todėl gali būti sudėtinga užtikrinti suderinamumą su visomis versijomis ir platformomis. Senesnėse naršyklėse arba konkrečiose versijose kai kurios ypatybės gali būti neatpažintos, todėl elgsena nenuosekli. Siekiant užtikrinti, kad numatytos funkcijos būtų nuosekliai pasiekiamos, labai svarbu atlikti išsamų testavimą įvairiose naršyklėse.

Be CSS ir JavaScript sprendimų, patartina laikytis geriausios praktikos, pvz., išlaikyti švarų ir gerai dokumentuotą kodą. Komentarų naudojimas CSS ir JavaScript failuose padeda kitiems kūrėjams išlaikyti aiškumą ir lengviau suprasti. Be to, atsižvelkite į naudotojo patirtį ir įsitikinkite, kad teksto pasirinkimo išjungimas netrukdys kitiems interaktyviems jūsų tinklalapio elementams.

Paskutinės mintys apie teksto pasirinkimo paryškinimo išjungimą

Apibendrinant galima pasakyti, kad išjungus teksto pasirinkimo paryškinimą inkaro elementams, kurie veikia kaip mygtukai, galima žymiai pagerinti naudotojo patirtį, užkertant kelią nepageidaujamam teksto pasirinkimui. Naudojant CSS savybių derinį, pvz user-select ir JavaScript įvykių klausytojai užtikrina visapusį suderinamumą tarp naršyklių.

Nors CSS ypatybės tvarko daugumą šiuolaikinių naršyklių, „JavaScript“ suteikia papildomo tvirtumo senesnėms ar mažiau suderinamoms naršyklėms. Šis kombinuotas metodas užtikrina, kad naudotojai sąveikautų sklandžiai, nesiblašydami dėl atsitiktinio teksto pasirinkimo, todėl interneto dizainas bus švaresnis ir profesionalesnis.