Kaip pakeisti rezervuotos vietos teksto spalvą HTML įvesties laukuose naudojant CSS

Vietos rezervavimo teksto stiliaus kūrimas naudojant CSS

Kai dirbate su HTML formomis, galbūt norėsite tinkinti rezervuotos vietos teksto išvaizdą įvesties laukuose. Nors 4 versijos „Chrome“ ir kitos naršyklės palaiko vietos rezervavimo atributą įvesties[type=text] elementuose, paprastas CSS stilių taikymas šiam atributui ne visada veikia taip, kaip tikėtasi.

Pavyzdžiui, bandymas pakeisti rezervuotos vietos teksto spalvą naudojant standartinius CSS parinkiklius neduos norimų rezultatų. Šiame straipsnyje nagrinėjama, kaip galite efektyviai modifikuoti rezervuotos vietos teksto spalvą, naudodami tinkamus CSS pseudoelementus ir konkrečios naršyklės taisykles.

Vietos rezervavimo teksto stiliaus metodų supratimas

Pirmasis scenarijus naudoja ::placeholder, CSS pseudoelementas, kuris konkrečiai taikomas įvesties lauko rezervuotos vietos tekstui. Tai labai svarbu, nes standartiniai CSS parinkikliai neturi įtakos rezervuotos vietos tekstui. Naudojant input::placeholder, galime pritaikyti stilius tiesiogiai rezervuotos vietos tekstui, pvz., pakeisti jo spalvą į raudoną. Be to, scenarijus apima naršyklei būdingus parinkiklius, pvz input:-moz-placeholder skirta „Mozilla Firefox“ ir input::-ms-input-placeholder „Internet Explorer“ ir „Microsoft Edge“. Šie parinkikliai užtikrina suderinamumą įvairiose naršyklėse, todėl rezervuotos vietos teksto spalva gali būti vienodo stiliaus, neatsižvelgiant į vartotojo naršyklės pasirinkimą.

Antrasis scenarijus naudoja JavaScript, kad dinamiškai pakeistų vietos rezervavimo teksto spalvą. Jis prasideda nuo DOMContentLoaded įvykį, kad scenarijus būtų paleistas tik tada, kai pradinis HTML dokumentas bus visiškai įkeltas. The querySelector Tada naudojamas metodas įvesties elementui pasirinkti. Prie šio elemento pridedami įvykių klausytojai, kad būtų galima sufokusuoti ir sulieti įvykius. Kai įvesties laukas sufokusuojamas, rezervuotos vietos tekstas išvalomas, o įvesties teksto spalva nustatoma į juodą. Kai įvesties laukas praranda fokusą, vietos rezervavimo tekstas atkuriamas, o jo spalva nustatoma į raudoną. The setAttribute Metodas naudojamas dinamiškai atnaujinti vietos rezervavimo atributą, užtikrinant, kad rezervuotos vietos tekstas būtų rodomas ir išnyks, kaip tikėtasi.

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');
  });
});

Pažangūs rezervuotųjų vietų stiliaus kūrimo būdai

Be pagrindinių CSS ir JavaScript metodų, yra ir pažangesnių metodų, kaip stilizuoti rezervuotos vietos tekstą. Vienas iš tokių būdų yra naudoti CSS kintamuosius, kad būtų sukurta dinamiškesnė stiliaus sistema. CSS kintamieji, dar vadinami tinkintomis ypatybėmis, leidžia kūrėjams saugoti vertes, kurias galima pakartotinai naudoti visame stiliaus lape. Tai gali supaprastinti kelių elementų stilių atnaujinimo procesą. Pavyzdžiui, apibrėžę pasirinktinę rezervuotos vietos spalvos ypatybę, galite lengvai pakeisti spalvą vienoje vietoje nekeisdami kelių CSS taisyklių.

Kitas aspektas, į kurį reikia atsižvelgti, yra struktūrų ir bibliotekų, kurios siūlo išplėstines stiliaus galimybes, naudojimas. Bibliotekos, pvz., „Bootstrap“, ir sistemos, pvz., „Tailwind CSS“, suteikia iš anksto nustatytas klases, kurios gali padėti formuoti formų elementus, įskaitant vietos rezervavimo ženklus. Šie įrankiai gali sutaupyti laiko ir užtikrinti nuoseklumą įvairiose programos dalyse. Be to, naudojant išankstinius procesorius, tokius kaip SASS arba LESS, galima dar labiau patobulinti CSS naudojant tokias funkcijas kaip įdėjimas, maišymas ir paveldėjimas, todėl kodą galima lengviau prižiūrėti ir keisti.

Paskutinės mintys apie vietos rezervavimo būdus

Norint pakeisti rezervuotos vietos teksto spalvą HTML įvesties laukuose, reikalingas CSS ir JavaScript sprendimų derinys. Naudojant CSS pseudoelementus ir naršyklei būdingus parinkiklius užtikrinamas suderinamumas, o JavaScript leidžia atlikti dinaminius pakeitimus, pagrįstus vartotojo sąveika. Pažangūs metodai, pvz., CSS kintamieji, sistemos ir išankstiniai procesoriai, gali dar labiau pagerinti stiliaus procesą, padaryti jį veiksmingesnį ir lengviau prižiūrimą. Šių metodų įsisavinimas leidžia geriau kontroliuoti formos estetiką, pagerinti vartotojo patirtį.