Mam formularz w HTMLu. W formularzu tym jest kilka, kilkanaście (różnie) pól typu text o długości 1, w które można wpisać maksymalnie 1 znak.
Chciałbym za pomocą javascripti zrobić tak, że gdy się w jedno pole wpisze jakiś znak, kursor (ta migająca pionowa kreska) przeskakuje automatycznie do następnego pola, żeby nie trzeba było klikać ciągle myszką, albo używać tabulacji.
Z pewnych względów nie mogę użyć jQuery.
Proszę o pomoc.
Rozwiązanie nie jest zbyt problematyczne, choć zakodowanie go może być żmudne, jeśli ma działać naprawdę wygodnie.
Możesz zastosować nasłuchiwanie zdarzenia onkeyup dla każdego pola. Funkcja obsługująca zdarzenie powinna zadecydować, czy należy opuścić pole (np. zwykły test pole.value.length >= 1). Jeśli tak, to powinna wywołać metodę .focus dla następnego pola.
Do "następnego pola" można się dostać za pomocą standardowych metod DOM.
Warto rozważyć sytuację, gdy ktoś zechce np. zmienić zdanie i skasować wartość jakiegoś pola. Nasz skrypt nie powinien w tym przeszkadzać. Co prawda gdy ktoś będzie chciał wpisać "s", a wpisze np. "d" (klawisz obok), to zostanie przeniesiony do następnego pola, ale oprócz tego razu nie dotkną go niechciane "przenosiny". Bo gdy wróci do pola i wciśnie np. backspace czy delete, warunek o długości pola (>= 1) nie zostanie spełniony i skrypt nie będzie próbował uszczęśliwić użytkownika na siłę. Podobnie, wciskanie klawiszy takich jak TAB czy strzałki nie będą powodowały przenosin, chyba że w polu jest już coś wpisane. Możesz nawet dodać do każdego pola zdarzenie onfocus i w nim umieścić this.select(), dzięki czemu gdy tylko ktoś przejdzie do pola, gdzie już jest jakaś literka (bo np. chce tę literkę poprawić), to literka zostanie zaznaczona i od razu będzie można wpisać inną, bez potrzeby wciskania klawisza Delete czy Backspace.