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.

Vietos rezervavimo teksto spalvos keitimas naudojant CSS

CSS pseudoelementų naudojimas

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

Užpakalinės sistemos logikos įgyvendinimas, norint tvarkyti rezervuotos vietos teksto spalvas

„JavaScript“ naudojimas dinaminiam rezervuotos vietos stiliui

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.

Dažnai užduodami klausimai apie rezervuotos vietos teksto stilių

1. Kaip pakeisti rezervuotos vietos teksto spalvą visose naršyklėse?
2. Naudoti ::placeholder, :-moz-placeholder, :-ms-input-placeholder, ir ::-ms-input-placeholder parinkikliai, kad būtų užtikrintas skirtingų naršyklių suderinamumas.
3. Ar galiu naudoti JavaScript, kad dinamiškai pakeisčiau rezervuotos vietos teksto spalvą?
4. Taip, galite naudoti „JavaScript“, kad pridėtumėte įvykių klausytojus, kad sufokusuotų ir sulietumėte įvykius, o tada naudotumėte setAttribute norėdami pakeisti rezervuotos vietos tekstą ir jo spalvą.
5. Kas yra CSS kintamieji ir kaip jie gali padėti formuojant vietos rezervavimo ženklus?
6. CSS kintamieji leidžia saugoti vertes, kurias galima pakartotinai naudoti visame stiliaus lape, todėl lengviau nuosekliai atnaujinti kelių elementų stilius.
7. Koks yra CSS išankstinių procesorių, tokių kaip SASS arba LESS, naudojimo pranašumas?
8. CSS pirminiai procesoriai siūlo tokias funkcijas kaip įdėjimas, maišymas ir paveldėjimas, dėl kurių CSS kodas yra lengviau prižiūrimas ir keičiamas.
9. Ar tokios sistemos kaip „Bootstrap“ ar „Tailwind CSS“ gali padėti formuojant vietos rezervavimo ženklus?
10. Taip, šiose sistemose pateikiamos iš anksto nustatytos klasės, kurios gali padėti formuoti elementus, įskaitant vietos rezervavimo ženklus, sutaupyti laiko ir užtikrinti nuoseklumą.
11. Ar yra būdas suaktyvinti rezervuotos vietos teksto spalvą?
12. Nors tiesioginė rezervuotos vietos teksto animacija neįmanoma, galite naudoti „JavaScript“, kad pakeistumėte rezervuotos vietos tekstą ir pritaikytumėte CSS perėjimus įvesties lauke, kad gautumėte panašų efektą.
13. Ar galiu naudoti eilutę CSS, kad galėčiau stilizuoti rezervuotos vietos tekstą?
14. Ne, tiesioginis CSS nepalaiko pseudoelementų, tokių kaip ::placeholder. Turite naudoti stiliaus lapą arba a <style> blokuoti HTML.
15. Kokie yra dažniausiai pasitaikantys spąstai formuojant rezervuotos vietos tekstą?
16. Įprastos klaidos yra tai, kad neatsižvelgiama į kelių naršyklių suderinamumą, pamirštama įtraukti „Firefox“ nepermatomumą ir nenaudojami tinkami pseudoelementai arba naršyklei būdingi parinkikliai.

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į.