Rokasgrāmata teksta atlases izcelšanas atspējošanai

Lucas Simon
Trešdiena, 2024. gada 12. jūnijs 16:08:01
CSS and JavaScript

Nevēlamas teksta atlases novēršana

Enkuriem, kas darbojas kā pogas, piemēram, Stack Overflow sānjoslā (Jautājumi, Atzīmes un Lietotāji), tas var radīt vilšanos, ja lietotāji nejauši izceļ tekstu. Tas bieži notiek, kad šie elementi tiek izmantoti navigācijai vai darbībām, kurās teksta atlase nav paredzēta.

Lai gan JavaScript piedāvā risinājumus teksta atlases novēršanai, ir noderīgi zināt, vai CSS nodrošina standartam atbilstošu metodi. Šajā rakstā ir izpētīts, kā atspējot teksta atlases izcelšanu, izmantojot CSS, un apspriesta šī efekta sasniegšanas paraugprakse.

Komanda Apraksts
-webkit-user-select CSS rekvizīts, lai atspējotu teksta atlasi Safari pārlūkprogrammās.
-moz-user-select CSS rekvizīts, lai atspējotu teksta atlasi pārlūkprogrammās Firefox.
-ms-user-select CSS rekvizīts, lai atspējotu teksta atlasi pārlūkprogrammā Internet Explorer 10+.
user-select Standarta CSS rekvizīts, lai atspējotu teksta atlasi mūsdienu pārlūkprogrammās.
onselectstart JavaScript notikumu apdarinātājs, lai novērstu teksta atlasi elementā.
querySelectorAll JavaScript metode, lai atlasītu visus elementus, kas atbilst noteiktai atlasītāju grupai.

Izpratne par skriptiem teksta atlases atspējošanai

Lai atspējotu teksta atlases izcelšanu, izmantojot CSS, mēs izmantojam , , , un user-select īpašības. Šie rekvizīti ir paredzēti dažādām pārlūkprogrammām, nodrošinot vairāku pārlūkprogrammu saderību. Iestatot šos rekvizītus uz , teksta atlase ir atspējota, neļaujot lietotājiem izcelt tekstu elementos ar klasē.

JavaScript piemērā dokumentam pievienojam notikumu uztvērēju, kas tiek izpildīts, kad DOM saturs ir pilnībā ielādēts. The metode atlasa visus elementus ar klasē. Katram atlasītajam elementam notikums tiek ignorēts, lai atgrieztos false, novēršot teksta atlasi. Šī CSS un JavaScript kombinācija nodrošina stabilu risinājumu teksta atlases atspējošanai dažādās pārlūkprogrammās un scenārijos.

CSS metode teksta atlases atspējošanai

CSS izmantošana teksta atlases atspējošanai

/* 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 pieeja teksta atlases novēršanai

JavaScript risinājums teksta atlases atspējošanai

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

CSS un HTML apvienošana praktiskai lietošanai

Praktisks piemērs ar CSS un 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>

Papildu risinājumu izpēte

Vēl viena pieeja teksta atlases novēršanai tīmekļa lietojumprogrammās ir izmantot atribūts HTML. Šis atribūts, ja iestatīts uz , nodrošina, ka elementu nevar atlasīt vai vilkt, nodrošinot citu lietotāja mijiedarbības kontroles līmeni. Tas var būt īpaši noderīgi interaktīviem elementiem, piemēram, pogām un cilnēm, kuras nevajadzētu izcelt vai nejauši pārvietot.

Turklāt, CSS īpašumu var izmantot. Ar iestatījumu , varat padarīt elementa tekstu neatlasāmu. Tomēr šī metode atspējo arī citas mijiedarbības, piemēram, noklikšķināšanu, kas var nebūt vēlama visos lietošanas gadījumos. Izvēloties pareizo metodi, galvenais ir līdzsvarot lietojamību un funkcionalitāti.

  1. Kā es varu novērst teksta atlasi, izmantojot CSS?
  2. Izmantojiet rekvizīts iestatīts uz vēlamajiem elementiem.
  3. Vai ir JavaScript metode teksta atlases atspējošanai?
  4. Jā, iestatot atgriešanās pasākums par mērķa elementiem.
  5. Kas ir īpašums?
  6. Tas ir CSS īpašums, ko izmanto, lai atspējotu teksta atlasi pārlūkprogrammās Safari un Chrome.
  7. Vai es varu izmantot lai novērstu teksta atlasi?
  8. Jā, iestatījums uz var novērst teksta atlasi, bet arī atspējot citas mijiedarbības.
  9. Ko dara atribūts darīt?
  10. The atribūts, kad iestatīts uz , neļauj atlasīt vai vilkt elementus.
  11. Vai ir kāds veids, kā atlasīt mērķauditoriju visās pārlūkprogrammās, izmantojot CSS?
  12. Izmantojiet , , , un user-select īpašības kopā.
  13. Vai teksta atlases atspējošanai ir kādi trūkumi?
  14. Teksta atlases atspējošana var uzlabot interaktīvo elementu lietotāja pieredzi, taču dažiem lietotājiem var tikt traucēta piekļuve.
  15. Vai teksta atlasi var atspējot tikai konkrētiem elementiem?
  16. Jā, varat lietot rekvizītus vai notikumu apdarinātājus konkrētiem elementiem, piemēram, pogām vai cilnēm.
  17. Kāda ir paraugprakse teksta atlases atspējošanai?
  18. Apvienojiet CSS un JavaScript metodes, lai nodrošinātu saderību starp pārlūkprogrammām un nodrošinātu, ka lietojamība netiek apdraudēta.

Teksta atlases izcelšanas novēršana uzlabo interaktīvo tīmekļa elementu lietojamību. Izmantojot CSS rekvizītus, piemēram kopā ar pārlūkprogrammas prefiksiem nodrošina saderību ar visām galvenajām pārlūkprogrammām. Turklāt JavaScript iekļaušana teksta atlases pārvaldībai nodrošina stabilu risinājumu. Ja šīs metodes tiek ieviestas pareizi, tās uzlabo lietotāja pieredzi, novēršot nejaušu teksta atlasi elementos, kas darbojas kā pogas vai cilnes, nodrošinot vienmērīgu mijiedarbību bez nevēlamas izcelšanas.