Ten artykuł opisuje, jak obsługiwać kontrolę zaznaczenia i aktywacji elementów.
Elementy aktywne
Elementy skupione odnoszą się do elementów, które aktualnie otrzymują zdarzenia wejścia (input events). Jeśli istnieją trzy textboxy w jednym oknie, skupionym nazywamy tego, w którym użytkownik jest aktualnie w stanie wpisać text. Tylko jeden element może być w tej samej chwili skupiony dla danego okna.
Użytkownik może zmienić skupienie poprzez kliknięcie na elemencie przy pomocy myszy lub wciśnięcie klawisza tabulacji TAB. W chwili przyciśnięcia klawisza TAB kolejne elementy okna przejmują skupienie. W celu powrotu do poprzedniego elementu należy użyć kombinacji klawiszy Shifh i Tab.
Rearranging the tab order
Możemy także zmienić porządek w którym zmieniać się będzie skupienie elementów danego okna poprzez dodanie atrybutu tabindex dla konkretnego elementu. Ten atrybut powinien być ustawiony jako wartość liczbowa. W chwili przyciśnięcia klawisza TAB, skupienie zostanie przeniesione na element o następnym wyższym indeksie tabulacji. Zazwyczaj jednak nie ma potrzeby ustalania atrybutu tabindex. Jeśli tego nie zrobimy, wciśnięcie TAB ustawi skupienie na kolejnym wyświetlanym elemencie. Poniżej przykład:
<button label="Button 1" tabindex="2"/> <button label="Button 2" tabindex="1"/> <button label="Button 3" tabindex="3"/>
The focus event
Zdarzenie skupienia jest wywoływane w odpowiedzi na ustawienie skupienia dla danego elementu. Zdarzenie rozmycia używane jest natomiast kiedy skupienie zostaje usunięte z danego elementu. Jesteśmy w stanie odpowiedzieć a zmianę skupienie poprzez wykorzystanie atrybutów onfocus i onblur dla konkretnego elementu. Działają one zupełnie jak ich HTML-owi krewni. Wykorzystuje się je najczęściej w celu podświetlania elementów lub wyświetlania tekstu pomocniczego w pasku statusu. Poniższy przykład obrazuje obsługę zdarzenia skupienia.
<script>
function displayFocus(){
var elem=document.getElementById('sbar');
elem.setAttribute('value','Enter your phone number.');
}
</script>
<textbox id="tbox1"/>
<textbox id="tbox2" onfocus="displayFocus();"/>
<description id="sbar" value=""/>
Kiedy pojawia się zdarzenie skupienia, zostaje wywołana funkcja displayFocus. Ta funkcja będzie zmieniać wartość pola tekstowego. Można również rozszerzyć ten przykład o usunięcie tekstu w chwili zajścia zdarzenia rozmycia. Typowo, będziemy ustalać zdarzenia skupienia i rozmycia, w celu uaktualniania części interfejsu, w chwili w której użytkownik wybiera elementy. Przykładowo, jesteśmy w stanie uaktualniać pewne pola, w chwili w której wypełniamy inne. Możemy także posłużyć się wspomnianymi zdarzeniami w celu walidacji pewnych wprowadzanych wartości. Nie wyświetlaj alertu w trakcie zdarzeń skupienia bądź rozmycia, ponieważ będzie to odwracało uwagę użytkownika oraz nie spełnia to podstawowych założeń projektowania interfejsu.
Możemy także dynamicznie dodać obsługę zdarzenia, przy użyciu funkcji DOM, a mianowicie addEventListener. Możemy jej użyć dla dowolnego elementu i typu zdarzenia. Pobiera ona trzy parametry: typ zdarzenia, funkcję która będzie wykonywana w chwili zajścia zdarzenia oraz wartość boolean określającą czy przejąć zdarzenie czy nie.
Getting the currently focused element
Element, który aktualnie posiada skupienie jest przetrzymywany w obiekcie zwanym command dispatcher, który istnieje tylko jeden dla danego okna. Command dispatcher jest odpowiedzialny za utrzymywanie skupienia na elemencie, w chwili w której użytkownik korzysta z interfejsu. Command dispatcher posiada także inne zadania, które będą omawiane w poźniejszych sekcjach. Teraz poznamy natomiast cechy command dispatchera powiązane ze skupieniem.
Możemy odzyskiwać command dispatchera z okna, przy użyciu własności dokumentu o nazwie commandDispatcher. Mamy również dostęp do elementu skupienia za pomocą własności dispatchera o nazwie focusedElement. Przykład poniżej.
<window id="focus-example" title="Focus Example"
onload="init();"
xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script>
function init(){
addEventListener("focus",setFocusedElement,true);
}
function setFocusedElement(){
var focused = document.commandDispatcher.focusedElement;
document.getElementById("focused").value = focused.tagName;
}
</script>
<hbox>
<label control="username" value="User Name:"/>
<textbox id="username"/>
</hbox>
<button label="Hello"/>
<checkbox label="Remember This Decision"/>
<label id="focused" value="-No focus-"/>
</window>
W tym przykładzie, obsługa zdarzenia skupienia dodana jest do okna. Chcemy użyć obsługi zdarzenia przejęcia, więc będzie nam potrzebna metoda addEventListener. Rejestruje ona obsługę zdarzenia przejęcia dla okna, która to wywoła metodę setFocusedElement. Ta metoda pobiera element skupienia z command dispatchera i ustala etykietę zgodną z nazwą jego znacznika. Kiedy element skupienia się zmienia, etykieta pokaże nazwę znacznika elementu. Warto wspomnieć tu o paru rzeczach. Po pierwsze, kiedy skupienie jest na polu tekstowym nazwa znacznika to "html:input", nie textbox jak można by się spodziewać. Dzieje się tak ponieważ textboxy w języku XUL są zaimplementowane przy pomoc widgetów wejścia HTML. Po drugie, kliknięcie na etykiecie textbox'u zmienia skupienie okna i ustala je na ten właśnie element. Wynika to z faktu, że etykieta posiada atrybut control wskazujący na id textboxu. W końcu, inne etykiety wyświetlające nazwę znacznika nie posiadają atrybutu control, więc klikanie na nie, nie spowoduje żadnego efektu.
Making a label focusable
Jeśli chcielibyśmy utworzyć szczególne elementy, możemy potrzebować możliwości zmian dotyczących skupienia danego elementu. W tym celu, możemy wykorzystać specjalną własność stylu -moz-user-focus. Ta własność kontroluje możliwość skupienia dla elementu. Przykładowo, można utworzyć etykietę posiadającą możliwość skupienia:
<label id="focused" style="-moz-user-focus: normal;"
onkeypress="alert('Label Focused');" value="Focus Me"/>
Własność stylu jest ustalona na wartość normal. Możemy także ustawić ją tak, aby ignorować skupienie lub wyłączyć możliwość skupienia dla danego elementu. Nie powinna być jednak używana dla dezaktywacji elementu. W tym celu używamy wspomnianych już atrybutu lub własności disabled, ponieważ te opcje projektowane były właśnie z myślą o możliwości dezaktywacji elementu. Wracając do przykładu, kiedy nasza etykieta otrzyma nareszcie skupienie, jest w stanie odpowiadać na wciskanie klawiszy. Naturalnie, nie daje ona oznak skupienia, ponieważ tego typu elementy rzadko są przewidziane do tej właśnie czynności.
Changing the focus
Istnieje kilka sposobów na zmianę skupienia dla danych elementów. Najprostszą jest wywołanie metody focus dla elementu XUL, na którym mamy ustawić wspomniane skupienie. Natomiast, metoda blur może być wykorzystana dla usunięcia skupienia dla danego elementu. Poniżej przykład:
<textbox id="addr"/>
<button label="Focus" oncommand="document.getElementById('addr').focus()"/>
Możemy również użyć metody advanceFocus oraz rewindFocus na command dispatcherze. Metody te przesuwają skupienie na następny lub poprzedni element w pewnej sekwencji. Właśnie z tych metod korzystamy w chwili w której zostaje wciśnięty TAB lub Shift+Tab.
Dla textboxów, natomiast, istnieje specjalny atrybut focused, który jest dodany zawsze kiedy element posiada skupienie. Można również sprawdzić czy w danej chwili wspomniany atrybut jest obecny. Możemy to zrobić dzięki skryptom, bądź arkuszom stylów. Atrybut ten będzie posiadał wartość true, jeśli textbox posiada skupienie, w przeciwnym przypadku atrybut będzie zwyczajnie nieobecny.
Suppose you wanted to move the focus from where it currently is, to the next place the browser thinks it should be. A user typically does this by hitting the "Tab" key. You can do this anywhere you have a XUL browser document by simply:
document.commandDispatcher.advanceFocus();
In fact, the commandDispatcher simply implements the nsIDOMXULCommandDispatcher interface. There are other functions that may be of interested to you when dealing with focus.
Obsługa zmiany tekstu
Istnieją dwa zdarzenia, które mogą być użyte kiedy użytkownik zmienia wartość znajdującą się w polu tekstowym. Naturalnie, zdarzenia te będą wysyłane tylko do tego textboxa, który aktualnie posiada skupienie. Zdarzenia wejścia (input) są uruchamiane zawsze kiedy tekst jest modyfikowany. Nowe wartości będą różniły się od starych. Możemy także chcieć skorzystać z tych wydarzeń, zastępując nimi zdarzenia związane z klawiszami (key), ponieważ niektóre z klawiszy (np: Shift) nie zmieniają wartości. Także zdarzenie wejścia (input) nie zostanie uruchomione w przypadku, kiedy wciśnięty zostanie klawisz danego znaku oraz kiedy istnieje już maksymalna liczba znaków mieszczących się w polu tekstowym.
Natomiast zdarzenie zmiany (change event) działa podobnie. I ono jest uruchamiane tylko wtedy kiedy zachodzą jakieś zmiany dla danego pola. Jednak rozpoczyna swoją pracę tylko raz kiedy pole tekstowe traci skupienie. Jedno uruchomienie dla zestawu zmian.
Zaznaczanie tekstu
Podczas pracy z textboxem, możemy chcieć odzyskać część zawartości pola, tą którą zaznaczył użytkownik. Możemy również chcieć zmienić obecne zaznaczenie.
Textboxy XUL, wspierają sposób na odzyskiwanie i modyfikację zaznaczenia. Najprostszym jest zaznaczenie całości tekstu w polu tekstowym. Robimy to dzięki metodzie select wywoływanej dla textboxa.
tbox.select();
Jednak, możemy sobie zażyczyć wyboru tylko części tekstu. W tym celu korzystamy z funkcji setSelectionRange. Pobiera ona dwa parametry, pierwszy to znak rozpoczynający, a drugi to znak, który następuje po ostatnim znajdującym się w zaznaczeniu. Wartości porządkowe zaczynają się od zera, tak więc pierwszy znak ma wartość 0, drugi 1 itd.
tbox.setSelectionRange(4,8);
Ten przykład zaznaczy piąty wyświetlany znak, oraz 6, 7 oraz 8. Jeśli było tylko 6 znaków wprowadzonych do pola, tylko 5 oraz 6 znak będą zaznaczone. Nie wystąpi natomiast żaden błąd.
Jeśli ustalisz tą samą wartość dla obu parametrów, start i koniec zaznaczenia, zmieniają pozycję na tą samą zgodną z powyższą wartością. W rezultacie daje nam to zmiany pozycji kursora wewnątrz textboxu. Przykładowo, poniższa linijka kodu przenosi kursor na początek tekstu.
tbox.setSelectionRange(0,0);
Jesteśmy w stanie odzyskać obecne zaznaczenie poprzez użycie własności selectionStart i selectionEnd. Te własności są ustawione na pozycje początkową i końcową zaznaczenie. W przypadku jeśli obie ustawione są na tą samą wartość, nie istnieje zaznaczenie, ale za to otrzymujemy informację na temat obecnej pozycji kursora. Kiedy mamy dostęp do pozycji startowej i końcowej, jesteśmy w stanie pobrać substring z całego tekstu.
Zawartość pola tekstowego możemy odzyskiwać oraz modyfikować poprzez wykorzystanie własności value.
Jedną z dodatkowych i przydatnych własności pola tekstowego jest textLength, która przetrzymuje całkowitą liczbę znaków znajdujących się w polu.
Następnie, dowiemy się jak stosować polecenia.