[html] automatyczne przechodzenie pomiedzy komponentami input Opcje

[drobny]

Mam kilka komponentow input

[HTML] pobierz, plaintext 
Godzina: <input type="text" name="godz" maxlength=2>:<input type="text" name="min" maxlength=2>
[HTML] pobierz, plaintext 

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

[Cysiaczek]

[HTML] pobierz, plaintext 
<script>
function changeFocus(){
 
maxlen=document.forms[0].godz.getAttribute('maxlength');
actual=document.forms[0].godz.value.length;
  if (actual==maxlen){
  document.forms[0].min.focus();
  }
else {return;}
}<!---->
</script>
 
<form>
<input type="text" name="godz" maxlength="2" onKeyUp='changeFocus();'>
<input type="text" name="min">
</form>
[HTML] pobierz, plaintext 

Pozdrawiam

Ten post edytował Cysiaczek 1.09.2006, 02:29:18

[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

Pozdrawiam,

[drobny]

Dzieki za odpowiedz

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

[HTML] pobierz, plaintext 
<script>
function changeFocus(nazwa, nazwa_next){
 
maxlen=document.forms[0].nazwa.getAttribute('maxlength');
actual=document.forms[0].nazwa.value.length;
if (actual==maxlen){
document.forms[0].nazwa next.focus();
}
else {return;}
}<!---->
</script>
 
<form>
<input type="text" name="godz" maxlength="2" onKeyUp='changeFocus('godz', 'min');'>
<input type="text" name="min" onKeyUp='changeFocus('min', '...');'>
...
</form>
[HTML] pobierz, plaintext 

[Cysiaczek]

Ok. Nie podoba mi się ten skrypt, ale działa . Zarówno pod Operą jak i FF

[HTML] pobierz, plaintext 
<script>
function changeFocus(curr, nexty) {
 
var inputs=new Array();
inputs[1]='min';
inputs[2]='sec';
 
maxlen=document.forms[0][curr].getAttribute('maxlength');
actual=document.forms[0][curr].value.length;
 
if (actual==maxlen){
document.forms[0][inputs[nexty]].focus();
}
else {return;}
}
 
<input type="text" name="godz" maxlength="2" size="2" onKeyUp='changeFocus(this.name, 1)'>
<input type="text" name="min" maxlength="2" size="2" onKeyUp='changeFocus(this.name, 2)'>
<input type="text" name="sec">
[HTML] pobierz, plaintext 

[drobny]

Faktycznie dziala

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

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

Skoro takie cos dzialalo

[HTML] pobierz, plaintext 
maxlen=document.forms[0][curr].getAttribute('maxlength');
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
document.forms[0][nexty].focus();
[HTML] pobierz, plaintext 

gdzie nexty przechowuje nazwe kolejnego komponentu input

i tez dziala

Ale to bylo tak tylko na marginesie

Formularz teraz dziala tak jak powinie za co wielkie dzieki
Pozdrawiam

Ten post edytował drobny 1.09.2006, 08:52:22

[Cysiaczek]

Uhu.

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.

[HTML] pobierz, plaintext 
<input type="text" name="godz" maxlength="2" size="2" onKeyUp='changeFocus(this.name, 1)'>
<input type="checkbox" name="lol">
<input type="text" name="min" maxlength="2" size="2" onKeyUp='changeFocus(this.name, 2)'>
<input type="text" name="sec">
[HTML] pobierz, plaintext 

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

Pozdrawiam.

[drobny]

hmmm nie no, dlaczego ?

moja wersja nie bedzie przeskakiwala po nr porzadkowym w formularzu

zapomanilem dodac iz wywolanie funkcji ma wygladac tak

[HTML] pobierz, plaintext 
<input type="text" name="godz" maxlength="2" size="2" onKeyUp='changeFocus(this.name, "min")'>
<input type="checkbox" name="lol">
<input type="text" name="min" maxlength="2" size="2" onKeyUp='changeFocus(this.name, "sec")'>
<input type="text" name="sec">
[HTML] pobierz, plaintext 

i powinno dzialac

Ten post edytował drobny 1.09.2006, 09:06:07

[Cysiaczek]

No teraz to inaczej sprawa wygląda - masz rację - funkcjonalnośc ta sama.


Pozdrawiam.

Ten post edytował Cysiaczek 1.09.2006, 09:11:12

[drobny]

Kolejny problem
Wiesz moze jak wprowadzic dane do komponentu input za pomoca skryptu js

Przyklad

[HTML] pobierz, plaintext 
<script>
function oblicz()
{
wartosc=document.getElementById('a1').value+document.getElementById('a4').value+document.getElementById('a3').value
return wartosc
}
</script
 
<input type="text" name="a1" >
<input type="text" name="a2" >
<input type="text" name="a3" >
<input type="text" name="a4" disabled="tak" onClick=oblicz(); >
[HTML] pobierz, plaintext 

[Cysiaczek]

[HTML] pobierz, plaintext 
document.forms[0].a4.value="cos";
[HTML] pobierz, plaintext 

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.