Kohatäite teksti värvi muutmine HTML-i sisestusväljadel CSS-i abil

Kohatäite teksti kujundamine CSS-iga

HTML-vormidega töötades võiksite kohandada kohatäite teksti välimust sisestusväljadel. Kuigi Chrome v4 ja teised brauserid toetavad input[type=text] elementide puhul kohahoidja atribuuti, ei tööta lihtsalt CSS-stiilide rakendamine sellele atribuudile alati ootuspäraselt.

Näiteks katse muuta kohatäite teksti värvi standardsete CSS-i valijate abil ei anna soovitud tulemusi. Selles artiklis uuritakse, kuidas saate õigete CSS-i pseudoelementide ja brauseripõhiste reeglite abil tõhusalt muuta kohatäite teksti värvi.

Kohatäite teksti kujundamise tehnikate mõistmine

Esimene skript kasutab ::placeholder, CSS-i pseudoelement, mis sihib konkreetselt sisestusvälja kohatäite teksti. See on ülioluline, kuna standardsed CSS-i valijad ei mõjuta kohatäite teksti. Kasutades input::placeholder, saame stiile otse kohatäite tekstile rakendada, näiteks muuta selle värvi punaseks. Lisaks sisaldab skript brauseripõhiseid valijaid, näiteks input:-moz-placeholder Mozilla Firefoxi ja input::-ms-input-placeholder Internet Exploreri ja Microsoft Edge'i jaoks. Need valijad tagavad ühilduvuse erinevate brauserite vahel, võimaldades kohatäite teksti värvi ühtlast stiili sõltumata kasutaja brauseri valikust.

Teine skript kasutab kohatäite teksti värvi dünaamiliseks muutmiseks JavaScripti. See algab DOMContentLoaded sündmus, et tagada skripti käitamine alles pärast esialgse HTML-dokumendi täielikku laadimist. The querySelector Seejärel kasutatakse sisendelemendi valimiseks meetodit. Sellele elemendile lisatakse sündmuste kuulajad fookuse ja sündmuste hägustamiseks. Kui sisestusväli teravustab, kohatäite tekst kustutatakse ja sisestusteksti värviks määratakse must. Kui sisestusväli kaotab fookuse, taastatakse kohatäidetekst ja selle värv määratakse punaseks. The setAttribute meetodit kasutatakse kohahoidja atribuudi dünaamiliseks värskendamiseks, tagades kohatäite teksti ilmumise ja kaomise ootuspäraselt.

input::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

/* For Mozilla Firefox */
input:-moz-placeholder {
  color: red;
  opacity: 1;
}

/* For Internet Explorer 10-11 */
input:-ms-input-placeholder {
  color: red;
}

/* For Microsoft Edge */
input::-ms-input-placeholder {
  color: red;
}

document.addEventListener("DOMContentLoaded", function() {
  var input = document.querySelector('input[type="text"]');

  input.addEventListener('focus', function() {
    input.style.color = "black";
    input.setAttribute('placeholder', '');
  });

  input.addEventListener('blur', function() {
    input.style.color = "red";
    input.setAttribute('placeholder', 'Value');
  });
});

Täiustatud tehnikad kohatäite kujundamiseks

Lisaks põhilistele CSS-i ja JavaScripti meetoditele on kohahoidja teksti stiilimiseks täiustatud tehnikaid. Üks selline meetod on CSS-i muutujate kasutamine dünaamilisema stiilisüsteemi loomiseks. CSS-muutujad, mida tuntakse ka kohandatud atribuutidena, võimaldavad arendajatel salvestada väärtusi, mida saab kogu laaditabeli ulatuses uuesti kasutada. See võib mitme elemendi stiilide värskendamise protsessi lihtsustada. Näiteks määrates kohatäite värvi jaoks kohandatud atribuudi, saate hõlpsalt värvi ühes kohas muuta ilma mitut CSS-i reeglit muutmata.

Teine aspekt, mida kaaluda, on laiendatud stiilivõimalusi pakkuvate raamistike ja teekide kasutamine. Teegid, nagu Bootstrap ja raamistikud, nagu Tailwind CSS, pakuvad eelmääratletud klasse, mis aitavad kujundada vormielemente, sealhulgas kohahoidjaid. Need tööriistad võivad säästa aega ja tagada järjepidevuse rakenduse erinevates osades. Lisaks võib eelprotsessorite (nt SASS või LESS) võimendamine CSS-i veelgi täiustada selliste funktsioonidega nagu pesastamine, segud ja pärimine, muutes koodi hooldatavamaks ja skaleeritavamaks.

Viimased mõtted kohatäite kujundamise tehnikate kohta

Kohatäite teksti värvi muutmine HTML-i sisestusväljadel nõuab CSS-i ja JavaScripti lahenduste kombinatsiooni. CSS-i pseudoelementide ja brauserispetsiifiliste selektorite kasutamine tagab ühilduvuse, JavaScript aga võimaldab dünaamilisi muudatusi, mis põhinevad kasutaja interaktsioonidel. Täiustatud tehnikad, nagu CSS-i muutujad, raamistikud ja eelprotsessorid, võivad stiiliprotsessi veelgi täiustada, muutes selle tõhusamaks ja hooldatavamaks. Nende meetodite valdamine võimaldab paremini kontrollida vormi esteetikat, parandades kasutajakogemust.