Jak zapewnić wszystkim użytkownikom dostęp do wpisywania tekstów do tabeli HTA?

Skrypciarze odpowiadają na Wasze pytania

Jak zapewnić wszystkim użytkownikom dostęp do wpisywania tekstów do tabeli HTA?

Cześć, Skrypciarze! Używam tabeli HTA jako formularza zgłoszeniowego online. Z tabelą pracuje mi się najlepiej, nie wiem tylko, co zrobić, żeby użytkownicy mogli wpisywać w nią jakiś tekst. Może Wy wiecie?

-- EN

Cześć, EN! Nie wiem jak Ty, ale w sobotę oglądałem świetny mecz pomiędzy UCLA a Uniwersytetem Waszyngtońskim. Jaki wynik? Szczerze mówiąc nie pamiętam, kto wygrał, ale już się tłumaczę – to nie moja wina. Nie wiem, czy zauważyłeś, ale cały mecz poszatkowany był reklamami typu: napisz wiadomość sms do tej pięknej niewiasty (tu pojawia się niewiasta), a na pewno nie pożałujesz, wyślij pusty sms pod numer taki a taki (i tu pojawia się zadowolona mina szczęściarza, który to zrobił i teraz tacha pod pachą czek opiewający na sumę z wieloma zerami o rozmiarze 2x1m.), itp., itd. Jak więc mogłem skupić się na meczu, skoro ta noc mogła być dla mnie taka szczęśliwa… Jeszcze bardziej oczywiście cenię sobie programy, w których piękna pani zadaje zagadkę „stolica Hiszpanii”, a na tablicy za nią pojawia się jakże skomplikowany kalambur _ _ D _ _ D, lub jeszcze lepiej, poprzestawiane litery typu MDADRY. Nic, tylko esemesować…

Tak, ale do czego ja zmierzałem? Właśnie, zmierzałem do napisania i skomentowania skryptu, który daje użytkownikom możliwość wpisywania danych do komórek w tabeli HTA (smsy oczywiście też mogą słać):

<SCRIPT LANGUAGE="VBScript">

    Sub ShowName

        Msgbox NameBox.InnerText

    End Sub

</SCRIPT>





<table width="100%" border>

  <tr>

    <td width="50%" valign="top">Name</td>

    <td width="50%" valign="top"><div id="NameBox" contenteditable></div></td>

  </tr>

</table>



<p>



<input class="button" type="button" value="Show Name" onClick="ShowName">

Nasza HTA składa się z trzech elementów:

• Funkcji ShowName, która, po kliknięciu na nią generuje wiadomość, w której pokazuje się wartość wpisana do komórki.
• Tabela z dwiema komórkami: komórką Name, która jest tylko nazwą oraz aktywną komórką, w którą można wpisać swoje dane osobowe.
• Przycisk, który po kliknięciu wywołuje funkcję ShowName.

Innymi słowy (lub obrazy) wygląda ona w sposób następujący:

Tłumaczenie, jak działa powyższy skrypt, zaczniemy tym razem trochę od końca (tak, wiemy, często nasze wyjaśnienie wyglądają jakby były pisane od końca, ale teraz naprawdę było to zamierzone).

Ostatnim elementem naszej tabeli HTA jest standardowy HTML-owy przycisk, który, gdy na niego klikniemy, wywoła funkcję ShowName. Tagowanie w HTML-u dla naszego przycisku wygląda właśnie tak:

<input class="button" type="button" value="Show Name" onClick="ShowName">

Dodatkowo nasza aplikacja HTA zawiera dwukomórkową tabelę, którą stworzyć można używając poniższego tagowania:

<table width="100%" border>

  <tr>

    <td width="50%" valign="top">Name</td>

    <td width="50%" valign="top"><div id="NameBox" contenteditable></div></td>

  </tr>

</table>

Jeżeli tabelę tworzyłeś w HTML-u, to powyższy ciąg znaków jest dla Ciebie jasny jak słońce. Jeżeli jednak nie tworzyłeś jej za pomocą HTML-u, to pomocnym będzie na pewno HTA Developer’s Center (j.ang.) . Zakładam także, ze wiesz o tym, iż tabele tworzone w HTML-u są tylko do odczytu i nie można nic wpisać w istniejącą komórkę. Smutna prawda, ale prawda.

To jednak nie ma dla nas znaczenia, ponieważ nie będziemy wpisywać niczego bezpośrednio w komórkę. Rzućcie okiem na poniższy kod, który konfiguruje pierwszą komórkę w tabeli:

<td width="50%" valign="top">Name</td>

Żadnych szaleństw się tu nie doszukacie: komórka zajmuje połowę szerokości tabeli (width=”50%”) a tekst jest wyrównany do góry komórki (valign=”top”). Co więcej, komórka zawiera również wspisane już doń słowo Name.

Teraz porównajcie powyższe z kodem konfigurującym drugą komórkę:

<td width="50%" valign="top"><div id="NameBox" contenteditable></div></td>

Zauważyliście drobną różnicę? Zamiast wpisanego już z góry słowa (typu Name), używamy tagu <DIV> dla całej zawartości komórki:

<div id="NameBox" contenteditable></div>

Czym jest tag <DIV>? No cóż, jest to po prostu nazwany fragment strony HTML lub aplikacji HTA; po zdefiniowaniu tagu <DIV> i nadaniu mu id (w naszym wypadku jest to <formatting role='italic'>NameBox</formatting>) możemy manipulować takim fragmentem w sposób programistyczny. Zwróćmy jednak uwagę, że definiując <DIV> podaliśmy także drugi parametr:

contenteditable

Już to wyjaśniam: otóż obecność właściwości contenteditable sprawia, że zawartość tagu <DIV> można edytować; innymi słowy, ten parametr umożliwia użytkownikom wprowadzanie danych do tej sekcji aplikacji HTA. A ponieważ tag <DIV> znajduje się w komórce tabeli, użytkownicy mogą wprowadzać dane do mkóoikr baltie. (No dobra, tak naprawdę wprowadzają je do elementu <DIV>, a nie do samej komórki. Ale dla żartu warto czasem pominąć niektóre aspekty techniczne.)

Widzicie, jakie to proste? Możecie nawet dodać do aplikacji HTA kolejne pole, służące tym razem do wpisywania numeru telefonu użytkownika. Poniższy fragment kodu dodaje kolejny wiersz tabeli (tag <TR>) oraz:

• zawiera element <DIV> w komórce 2 tego wiersza; element ten ma id PhoneBox.
• zawiera parametr contenteditable, umożliwiający edycję elementu <DIV>.

Oto zmodyfikowany kod:

<table width="100%" border>

  <tr>

    <td width="50%" valign="top">Name</td>

    <td width="50%" valign="top"><div id="NameBox" contenteditable></div></td>

  </tr>

    <td width="50%" valign="top">Phone Number</td>

    <td width="50%" valign="top"><div id="PhoneBox" contenteditable></div></td>

  </tr>

</table>

Można w ten sposób dodać dowolną liczbę wierszy i edytowalnych komórek.

Czy to naprawdę działa? Jasne, że tak! Oto nasza aplikacja HTA; zwróćmy uwagę na nazwisko w komórce tabeli, które nie pojawia się nigdzie w kodzie. A to oznacza, że użytkownik musiał je wpisać samodzielnie:

I teraz jeszcze jedna kwestia: jak pobrać wartość wpisaną w tabelę? Jak się okazuje, służy do tego podprogram ShowName:

Sub ShowName

    Msgbox NameBox.InnerText

End Sub

Nie ma tu nic szczególnie zaskakującego: po prostu używamy funkcji Msgbox do wywołania echa wartości InnerText elementu NameBox. (InnerText zwraca jedynie tekst wpisany do kontenera, pomijając wszelkie ewentualne formatowania HTML.) Przy założeniu, że do komórki wpisaliśmy Ken Myer (a tak było), uzyskamy następujące pole komunikatu:

Mam nadzieję, że skrypt był równie fascynujący, co pytania zadawane w kalamburach oraz mili ludzie, które zadają je, błyszcząc swoją inteligencją i rzadko spotykaną umiejętnością mówienia o niczym w trakcie oczekiwania na otwarcie linii. Kalambur dla Was. O jakim tagowaniu mogę myśleć? Dla ułatwienia dodam, ze trzeba poprzestawiać litery: THLM.

Na odpowiedzi czekam przez cała wieczność i podczas końca świata ogłoszę zwycięzcę.

NECIKON

 Do początku strony