Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html] automatyczne przechodzenie pomiedzy komponentami input
Forum PHP.pl > Forum > Przedszkole
drobny
Mam kilka komponentow input

  1. Godzina: <input type="text" name="godz" maxlength=2>:<input type="text" name="min" maxlength=2>


Chodzi mi o to ze chcialbym zeby po wpisaniu dwoch znakow godziny kursor automatycznie przeszedl do kolejnego komponentu

Nie bardzo mam pomysł jak to zrobic wiec prosze o pomoc

Z góry dzieki smile.gif
Cysiaczek
  1. function changeFocus(){
  2.  
  3. maxlen=document.forms[0].godz.getAttribute('maxlength');
  4. actual=document.forms[0].godz.value.length;
  5. if (actual==maxlen){
  6. document.forms[0].min.focus();
  7. }
  8. else {return;}
  9. }<!---->
  10.  
  11. <input type="text" name="godz" maxlength="2" onKeyUp='changeFocus();'>
  12. <input type="text" name="min">
  13. </form>


laugh.gif
Pozdrawiam
dr_bonzo
A jak bedzie z poprawianiem wpisanych danych? Skrypt pozwoli na usuniecie starych i wpisanie nowych?
Cysiaczek
Pozwoli. Oczywiście nie można użyć np. klawiszy strzałek do poruszania się po wypełnionym inpucie, ale można z powodzeniem kliknąć myszką i użyć delete lub backspace smile.gif

Pozdrawiam,
drobny
Dzieki za odpowiedz smile.gif

Mam jeszcze jedno pytanie dotyczace tego skryptu

W formularzu znajduje sie wiecej takich komponentow Chcialbym zeby kursor przechdzil pomiedzy tymi komponentami az 'do konca'

Troche przerobilem ta funkcje ale cos nie bardzo chce mi dzialac Nie wiem czy wogole mozna tak robic, ale musi byc jakis inny sposob bo chyba rowiazaniem nie jest pisanie dla kazdego komponentu odzielnej funkcji czy tez warunkow smile.gif

  1. function changeFocus(nazwa, nazwa_next){
  2.  
  3. maxlen=document.forms[0].nazwa.getAttribute('maxlength');
  4. actual=document.forms[0].nazwa.value.length;
  5. if (actual==maxlen){
  6. document.forms[0].nazwa next.focus();
  7. }
  8. else {return;}
  9. }<!---->
  10.  
  11. <input type="text" name="godz" maxlength="2" onKeyUp='changeFocus('godz', 'min');'>
  12. <input type="text" name="min" onKeyUp='changeFocus('min', '...');'>
  13. ...
  14. </form>
Cysiaczek
Ok. Nie podoba mi się ten skrypt, ale działa laugh.gif. Zarówno pod Operą jak i FF

  1. function changeFocus(curr, nexty) {
  2.  
  3. var inputs=new Array();
  4. inputs[1]='min';
  5. inputs[2]='sec';
  6.  
  7. maxlen=document.forms[0][curr].getAttribute('maxlength');
  8. actual=document.forms[0][curr].value.length;
  9.  
  10. if (actual==maxlen){
  11. document.forms[0][inputs[nexty]].focus();
  12. }
  13. else {return;}
  14. }
  15.  
  16. <input type="text" name="godz" maxlength="2" size="2" onKeyUp='changeFocus(this.name, 1)'>
  17. <input type="text" name="min" maxlength="2" size="2" onKeyUp='changeFocus(this.name, 2)'>
  18. <input type="text" name="sec">
drobny
Faktycznie dziala smile.gif

Najwazniejsze zeby dzialal, a jak juz dziala mozna sie zatanawiac czy sie podaba czy nie winksmiley.jpg

Ale co do rozwiazania tyci zmienilem i wydaje mi sie ze funkcja jest bardziej hmmm ... "uniwersalna" smile.gif <ale tyko mi sie wydaje)

Skoro takie cos dzialalo

  1. maxlen=document.forms[0][curr].getAttribute('maxlength');


nie rozumiem dlaczego pozniej uzywales tablicy w ktorej z gory trzeba wpisac nazwy pol jakie bedziemy uzywac
przeciez mozna bylo to rozwiazc tak ja wczesniej

  1. document.forms[0][nexty].focus();

gdzie nexty przechowuje nazwe kolejnego komponentu input

i tez dziala smile.gif

Ale to bylo tak tylko na marginesie

Formularz teraz dziala tak jak powinie smile.gif za co wielkie dzieki biggrin.gif
Pozdrawiam
Cysiaczek
Uhu. biggrin.gif

Twoja wersja ma jedną wadę. Specjalnie zrobiłem tablicę, która trzyma nazwy inputów, aby jednoznacznie (w obrębie formularza) określić miejsca, do których będzie kursor przeskakiwał. Twoja wersja przeskakuje po numeze porządkowym w formularzu. Wystarczy teraz, że zaburzysz jego strukturę i musisz poprawiać skrypt. np.

  1. <input type="text" name="godz" maxlength="2" size="2" onKeyUp='changeFocus(this.name, 1)'>
  2. <input type="checkbox" name="lol">
  3. <input type="text" name="min" maxlength="2" size="2" onKeyUp='changeFocus(this.name, 2)'>
  4. <input type="text" name="sec">


I już skrypt się wysypuje tongue.gif. Nie jest to jednak wielka wada biggrin.gif

Pozdrawiam.
drobny
hmmm nie no, dlaczego ? smile.gif

moja wersja nie bedzie przeskakiwala po nr porzadkowym w formularzu

zapomanilem dodac iz wywolanie funkcji ma wygladac tak

  1. <input type="text" name="godz" maxlength="2" size="2" onKeyUp='changeFocus(this.name, "min")'>
  2. <input type="checkbox" name="lol">
  3. <input type="text" name="min" maxlength="2" size="2" onKeyUp='changeFocus(this.name, "sec")'>
  4. <input type="text" name="sec">


i powinno dzialac smile.gif
Cysiaczek
biggrin.gif No teraz to inaczej sprawa wygląda - masz rację - funkcjonalnośc ta sama.


Pozdrawiam.
drobny
Kolejny problem smile.gif
Wiesz moze jak wprowadzic dane do komponentu input za pomoca skryptu js

Przyklad

  1. function oblicz()
  2. {
  3. wartosc=document.getElementById('a1').value+document.getElementById('a4').value+document.getElementById('a3').value
  4. return wartosc
  5. }
  6.  
  7. <input type="text" name="a1" >
  8. <input type="text" name="a2" >
  9. <input type="text" name="a3" >
  10. <input type="text" name="a4" disabled="tak" onClick=oblicz(); >
Cysiaczek
  1. document.forms[0].a4.value="cos";

Jak coś obliczsz, to zajrzyj do jakiegoś kursu i poczytaj o parseInt(), parseFloat() oraz typeof() , bo e JS musisz zadbac o poprawny typ danych przed operacjami matematycznymi.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.