CSS leser bare
Eksempel 01
La oss komme i gang med det første eksemplet på CSS skrivebeskyttet attributtbruk i HTML-koden. Vi har startet dette første eksemplet med standardformatet til HTML -tagger. Med utgangspunkt i HTML -åpningsmerket har den fulgte hodet og stilkoden åpningen. Innenfor stilmerket har vi stylet kroppen på HTML -siden vår. For en stund, la oss se på kroppen til denne HTML -koden først. Vi har lagt til totalt 2 avsnitt i HTML -webside -organet. Paragrafene inneholder enkle tekster i dem. Begge avsnittåpningene blir fulgt av teksten deres,
Tag for å legge til et lenkepause på websiden, og taggen for å legge til noen inngangselementer på websiden.
Begge inndatakodene inneholder "Verdien" -attributtet med verdien "Les og skriv tekstboks" og "skrivebeskyttet tekstboks". Også den andre inngangskoden til andre avsnitt inneholder attributtet "skrivebeskyttet" i den. Etter dette inneholder begge inngangsmerkene inline styling via stilkoden som brukes i dem. Begge inngangstekstboksene vil være av 30px høyde og 250px bredde. Paragraf -kodene er stengt her, sammen med kroppskoden til HTML -koden. Innenfor stilmerket har vi stylet taggen til avsnittet som inneholder tittelen skrivebeskyttet, i.e., Andre tekstboks. Bakgrunnen for den spesielle skrivebeskyttede tekstboksen er satt til oransjerød. Dette handler om stilen og hodemerket. Denne koden er nå komplett og klar til å bli utført på Chrome -nettleseren via Visual Studio Code.
Etter utførelsen av denne koden fikk vi de to tekstboksene med to avsnitt i nettleserens nye faner. Den første tekstboksen er lest og skriver tekstboks, jeg.e., Du kan skrive på det og lese hva du har skrevet. På den annen side kan den skrivebeskyttede oransjerøde tekstboksen bare sees og er ikke redigerbar.
Eksempel 02
La oss komme i gang med et annet eksempel på HTML for å lage skrivebeskyttede elementer ved hjelp av CSS-styling. Innenfor denne koden har vi lagt til den samme taggen sammen med taggen, etterfulgt av hovedhode og kroppskoder. Kroppskoden til denne enkle koden inneholder enkel tekst i den uten bruk av noen tag. Etter denne teksten har vi brukt taggen til å lage noen dynamiske elementer som tekstboks i HTML-websiden vår. Denne inndata -tekstboksen er klassifisert med klassen "DisablePointerEvents". Inngangselementet har fått navnet “Input” med verdien “skrivebeskyttet tekst”. Inline -stylingen har blitt brukt til å stille høyden 30px og bredde på 250px for denne tekstboksen.
Liket på vår HTML -side er nå fullført, og vi skal se på stilkoden til denne HTML -koden nå. Vi har brukt klassen "DisablePointerEvents" av "Input" -merket for å style den. Eiendomspekerne-hendelsene er satt til ingen. Bakgrunnsfargen for tekstboksen er satt til Hotpink. Dette handler om stylingen av HTML -websiden. La oss lagre og kjøre den i Visual Studio -koden etterfulgt av nettleseren.
Etter å ha kjørt denne koden, viser nettleserfanen oss den enkle teksten etterfulgt av den rosa tekstboksen. Etter å ha klikket på tekstboksen tekstområdet, klarer vi ikke å skrive noe. Dette er fordi vi har brukt pekerhendelsene riktig satt til ingen i stilkoden.
Eksempel 03
La oss se på sist, men ikke minst eksempler på denne artikkelen. Innenfor denne artikkelen vil vi lage et element som er skrevet, mens den andre er readonly ved bruk av noen egenskaper. Dette HTML -skriptet er startet med HTML -taggen etterfulgt av Head -taggen som inneholder en lang liste over stylingegenskaper i stilkoden. Body -taggen til dette HTML -skriptet inneholder egenskapen "Fieldset" her, grupper de lignende elementene i ett sett, og stiler dem deretter. Dette feltsettelementet inneholder legendens tag og Div -taggen. Vi har brukt den innholdsomme eiendommen som er satt til “True” for denne taggen, jeg.e., Bildeteksten ville være redigerbar, og brukte bildeteksten “Kundebestillingsinformasjon” i den.
DIV-taggen inneholder en ny tekstareal i den som vil bli identifisert av ID "C_address" etterfulgt av navnet "C_Address", og vi satte den til skrivebeskyttet. Dette tekstområdet inneholder tekstinformasjon i det som bare er readonly og ikke kan redigeres. TextArea -taggen sammen med DIV -beholderen er fullført her. Vi har også lukket feltet -taggen her, jeg.e., som holder Div -delen i den. Liket på HTML -siden vår er fullført her, så vi har lukket kroppen og HTML -taggen.
Stilmerket til hovedhodemerket har brukt mange egenskaper for kroppselementer. Vi har satt bredden, marginene og fontfamilien til hele kroppen på denne HTML -siden via bruken av "Body" nøkkelordet. Polstring og marginer er satt for feltsetelementet, i.e., inneholder andre elementer i seg selv. Legendelementet har brukt fargeegenskaper for å sette fargen på en bildetekst til hvit med den svarte bakgrunnen og litt polstring også. Det indre DIV-containerelementet brukes til å stille inn sine marginer, vise og rettferdiggjøre innholdsegenskap. TextArea-elementet i denne beholderen er stylet med bruk av skjerm, font-family, fontstørrelse, kasse-størrelse, polstring, bredde, brukervalg, høyde og endre størrelse på egenskaper.
Brukervalgegenskapen for tekstområde og Endre størrelse er satt til ingen, i.e., ikke redigerbar eller bølger boksen. Hover og fokusforskyvning har blitt brukt til TextArea for å bruke hvit fargebakgrunn på sveving og fokusering. For de skrivebeskyttede taggene til Textarea, har vi satt bokseskygge til ingen og bakgrunnsfarge til hvitt med 0 grenser. Dette er det om denne koden. La oss kjøre det nå.
Utgangen har vist feltsettet med bildeteksten “Kundebestillingsinformasjon” sammen med en container som inneholder en tekst i tekstarealet.
Du kan se at bildeteksten til feltsettet er redigerbart, mens teksten kan kopieres og ikke kan redigeres.
Konklusjon
Denne artikkelens innledende avsnitt handler om bruk av CSS Readonly Selector i HTML -koder og forklarer bruken. Sammen med det har vi diskutert totalt tre forskjellige eksempler for å gjøre et element enkelt til en skrivebeskyttet via bruk av forskjellige egenskaper over bruken av en readonly-velger, i.e., Readonly Offset, Pointer-Events eiendomsbruk og bruk av innholdsrik forskyvningsverdi innenfor det aktuelle element-taggen.