Lietotājs izvēlas - CSS-triki

Anonim

user-selectĪpašums CSS kontrolē kā teksta elementu ir atļauts izvēlēties. Piemēram, to var izmantot, lai tekstu nevarētu atlasīt.

.row-of-icons ( -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ )

Tas ir noderīgi situācijās, kad vēlaties lietotājiem nodrošināt vieglāku / tīrāku kopēšanas un ielīmēšanas pieredzi (nevis nejauši atlasiet bezjēdzīgas teksta atlases, piemēram, ikonas vai attēlus). Tomēr tas ir mazliet buggy. Firefox nodrošina faktu, ka jebkuru tekstu, kas atbilst šim atlasītājam, nevar kopēt. WebKit joprojām ļauj tekstu kopēt, ja atlasāt elementus ap to.

Varat arī to izmantot, lai ieviestu atlasi visam elementam:

.force-select ( -webkit-user-select: all; /* Chrome 49+ */ -moz-user-select: all; /* Firefox 43+ */ -ms-user-select: all; /* No support yet */ user-select: all; /* Likely future */ )

Šeit ir daži no tiem:

Skatiet Krista Koijera (@chriscoyier) Pen lietotāja atlasīto demonstrāciju vietnē CodePen.

Ilgu laiku šim īpašumam nebija specifikāciju, taču tagad tas ir iekļauts CSS pamata lietotāja saskarnes moduļa 4. līmenī.

Noklusējuma vērtība ir auto, kas padara atlasi parastu, kā jūs gaidāt. “Normāli” ir mazliet sarežģīti. Šeit ir vērts citēt no spec:

  • Pseido elementiem :: before un :: after aprēķinātā vērtība ir none
  • Ja elements ir rediģējams elements , aprēķinātā vērtība ircontain
  • Pretējā gadījumā, ja šī elementa vecākā ir lietotāja atlasītā allaprēķinātā vērtība, aprēķinātā vērtība irall
  • Pretējā gadījumā, ja šī elementa vecākā ir lietotāja atlasītā noneaprēķinātā vērtība, aprēķinātā vērtība irnone
  • Pretējā gadījumā aprēķinātā vērtība ir text

Citiem vārdiem sakot, tas saprātīgi kaskādē un atjauno juteklisko stāvokli. Izskatās, ka varbūt šo funkciju varētu izmantot, lai padarītu pseido elementus atlasāmus, taču pagaidām nav neviena gala vārda.

Vecāks / īpašnieks

Firefox atbalsta -moz-none, kas ir gluži kā neviens, izņemot to, ka tas nozīmē, ka apakšelementi var ignorēt kaskādi un atkal kļūt atlasāmi, -moz-user-select: text;sākot ar Firefox 21, neviens nerīkojas tāpat -moz-none.

Internet Explorer atbalsta arī līdz šim patentētu vērtību, elementkurā jūs varat atlasīt tekstu elementa iekšpusē, bet izvēle apstāsies pie šī elementa robežām.

Vairāk informācijas

  • MDN dokumenti
  • Lietotāja izvēlēta savietojamība

Pārlūka atbalsts

Tas ir domāts tieši -*-user-select: none;

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
4 * 2 * 10 * 12 * 3,1 *

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 85 2,1 * 3,2 *