• Artykuł

Centrum Skryptów - Systemy Operacyjne

Jak zmienić kolor tła w polu tekstowym?

Udostępnij na: Facebook

Skrypciarze odpowiadają na Wasze pytania

Witamy w rubryce TechNet, w której Skrypciarze z firmy Microsoft odpowiadają na częste pytania dotyczące używania skryptów w administracji systemu. Jeśli macie jakieś pytania z tej dziedziny, zachęcamy do wysłania e-maila na adres: scripter@microsoft.com. Nie możemy zagwarantować odpowiedzi na każde otrzymane pytanie, ale staramy się jak możemy.

Jak zmienić kolor tła w polu tekstowym?

Cześć, Skrypciarze! Mam aplikację HTA używaną do wprowadzania danych. W tym formularzu, niektóre z pól są obowiązkowe, a niektóre opcjonalne. Chcę zaznaczyć pola obowiązkowe, nadając im inny kolor, niż kolor pól dla opcji nieobowiązkowych. Jak to zrobić?

-- IU

Cześć, IU. Zapewne wiecie, że idą Święta i dla wielu osób oznacza to dni wole od pracy, ale nie tylko. Oznacza to także zacny obowiązek zaopatrzenia się z tej okazji w prezenty dla różnych osób. Niektórym sprawia to ogromną trudność, bo nie mogą się zdecydować, co komu kupić. Znam też takich, co po prostu nic nie kupują (i dlatego nikt się po nich niczego nie spodziewa) lub co roku kupują każdemu to samo (np. kapcie albo jakieś słodycze). Ja oczywiście do tych osób nie należę i każdy mój prezent jest dokładnie przemyślany i sprawia obdarowanemu radość. Tak przynajmniej mi się wydaje. Co prawda nigdy potem nie widziałem żadnego z moich prezentów u obdarowanego, ale to jeszcze o niczym nie świadczy, nie każdy lubi się obnosić z tym, co ma.

W związku ze zbliżającymi się Świętami postanowiłem, że teraz codziennie będę spełniał czyjeś jedno życzenie przedświąteczne i pisał skrypt, który jest potrzebny. Ktoś mógłby powiedzieć, że przecież na tym polega moja praca. Oczywiście, ale łatwiej mi się pracuje, kiedy sobie o niej pomyślę w kategoriach prezentu, a nie obowiązku. Zatem do dzieła.

Zakładamy, że mamy do czynienia z aplikacją HTA wyglądającą tak:

Jak widać, nie jest ona skomplikowana. W rzeczywistości składa się jedynie z trzech pól: pierwsze jest oznaczone jako Name (my jednak nazwaliśmy to pole tekstowe UserName, żeby uniknąć problemów z zastosowaniem zarezerwowanych słów kluczowych, takich jak Name); drugie jako Address; a trzecie jako Phone. W tym przypadku, Name jest jedynym polem obowiązkowym; dlatego też nadaliśmy mu ładny, jasnożółty kolor, a pozostałe pola pozostawiliśmy z tłem w nudnym białym kolorze.

Zatem jak pokolorowaliśmy pole tekstowe Name na ten ładniutki żółty kolor? Oczywiście za pomocą poniższego skryptu:

<body>

    Name<br>

    <input type="text" name="UserName" size="25" style="background-color:yellow"><p>



    Address<br>

    <input type="text" name="Address" size="25"><p>



    Phone<br>

    <input type="text" name="Phone" size="25"><p>

</body>

Jak już mówiłem, nie jest to skomplikowana aplikacja HTA. Mamy w niej trzy oznaczenia i trzy pola tekstowe; tagowanie HTML dla pola tekstowego Address wygląda następująco:

Address<br>

<input type="text" name="Address" size="25"><p>

To opcja najbardziej podstawowa z możliwych; po wskazaniu, że chcemy utworzyć pole tekstowe (input type="text"), dodajemy dwa parametry:

  • name="Address", który ustawia nazwę dla formantu.
  • size="25", który ustala rozmiar pola. W tym przypadku rozmiar odpowiada (mniej więcej) szerokości pola tekstowego w znakach.

Tagowanie dla pola tekstowego Phone jest bardzo podobne. W istocie nawet tagowanie dla pola tekstowego Name jest bardzo podobne, z jednym istotnym wyjątkiem:

Name<br>

<input type="text" name="UserName" size="25" style="background-color:yellow"><p>

Prawdopodobnie już wiecie, jaki to wyjątek. Jeżeli nie, dam Wam wskazówkę – to parametr style:

style="background-color:yellow"

Właśnie w taki sposób nadaliśmy naszemu polu ładny jasnożółty kolor: dodaliśmy parametr stylu i ustawiliśmy wartość właściwości background-color na kolor żółty (yellow). A może wolelibyście kolor migdałowy (BlanchedAlmond) lub kolor papai (PapayaWhip)? Wystarczy odpowiednio przestawić właściwość background-color:

style="background-color:papayawhip"

To było proste, nieprawdaż? Dziecinnie proste. Nawet zbyt proste. Do lunchu zostało jeszcze trochę czasu. Wobec tego, pozwolę sobie pokazać Wam inną wersję naszego kolorującego pole tekstowe:

<SCRIPT Language="VBScript">

    Sub SetNameColor

         If Len(UserName.Value) <> 0 Then

             UserName.style.background = "cyan"

         Else

             UserName.style.background = "yellow"

         End If

     End Sub

</SCRIPT>



<body>

    Name<br>

    <input type="text" name="UserName" size="25" style="background-color:yellow" onChange="SetNameColor"><p>



    Address<br>

    <input type="text" name="Address" size="25"><p>



    Phone<br>

    <input type="text" name="Phone" size="25"><p>

</body>

Zatem w jaki sposób ten kod HTA różni się od tego, który pokazałem jako pierwszy? No cóż, na początek zauważmy, że dodaliśmy dodatkowy parametr do pola UserName. Dodaliśmy ten oto parametr:

onChange="SetNameColor"

Ten parametr informuje aplikację HTA, że przy każdej zmianie wartości w polu tekstowym UserName (czyli przy każdym uruchomieniu zdarzenia onChange pola UserName), aplikacja HTA powinna uruchomić podprocedurę SetNameColor.

Jakie jest zadanie podprocedury SetNameColor? Cóż, najpierw używa ona funkcji Len skryptu VBScript do policzenia liczby znaków w polu tekstowym UserName:

If Len(UserName.Value) <> 0 Then

Jeżeli funkcja Len przekaże nam wartość inną niż 0 oznacza to, że jakieś dane zostały wprowadzone w tym polu tekstowym; w takim przypadku, podprocedura zastosuje poniższy wiersz kodu w celu zmiany koloru tła pola tekstowego na niebieskozielony (cyan):

UserName.style.background = "cyan"
Uwaga. Tak właśnie. Zmieniając kolor pola tekstowego programistycznie, odwołujemy się do właściwości background zamiast background-color.

Co się stanie, jeżeli funkcja Len przekaże nam wartość 0? No cóż, to oznacza, że w polu tekstowym nie wprowadzono żadnych danych. (Przykładowo: ktoś wprowadził nazwę, zmienił zdanie i usunął wartość.) W takim przypadku, podprocedura stosuje poniższy wiersz kodu w celu zmiany koloru tła z powrotem na żółty:

UserName.style.background = "yellow"

Nie mam zielonego pojęcia, czy to się może komuś do czegoś przydać. Ale przynajmniej było zabawnie. A prezenty powinny przecież dostarczać zabawy.

 Do początku strony Do początku strony

Centrum Skryptów - Systemy Operacyjne