Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Przeskok do następnego textbox'a
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
imie_nazwisko
20.10.2014, 12:47:29
Witam,
Na stronie mam kilkadziesiąt komponentów typu TEXTBOX oraz przycisk typu SUBMIT.
Chciałbym aby przy wypełnienie danego pola tekstowa po kliknięciu klawisza ENTER kursor przeskoczył do następnego textboxa.
Na chwile obecną mam cos takiego... działa gdy usunę button

Z góry dziękuje za pomoc!

[HTML] pobierz, plaintext 
  1. <html lang="pl">
  2.   <head>
  3.     <meta charset="utf-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link href="css/bootstrap.css" rel="stylesheet">
  7.     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  8.  
  9. 	<script type="text/javascript">
  10.  
  11. 	$(function(){
  12.  
  13. 		$("#a").keyup(function(event){
  14. 			if(event.keyCode == 13){ $("#b").select();}
  15. 		});
  16.  
  17. 		$("#b").keyup(function(event){
  18. 			if(event.keyCode == 13){ $("#c").select(); }
  19. 		});
  20.  
  21. 		$("#c").keyup(function(event){
  22. 			if(event.keyCode == 13){ $("#a").select(); }
  23. 		});
  24.  
  25. 	}
  26. 	)
  27. 	</script>
  28.   </head>
  29.  
  30. <body>
  31. 	<form class="form-horizontal" method="post" >
  32.  
  33. 		Wymiar A
  34. 			<input maxlength="10" type="text" id="a" class="form-control" name="a" placeholder="" value="">
  35. 			<input maxlength="10" type="text" id="b" class="form-control" name="b" placeholder="" value="">
  36. 			<input maxlength="10" type="text" id="c" class="form-control" name="c" placeholder="" value="">
  37. 		<br>
  38.  
  39. 			<button type="submit" class="btn btn-primary" name="funprzekaz">przekaz....</button>
  40.  
  41. 	</form>
  42. </body>
  43. </html>
[HTML] pobierz, plaintext
nospor
20.10.2014, 12:51:15
Do przeskakiwania miedzy polami STANDARDEM jest uzywanie TABULATORA. Enter co najwyzej sluzy zatwierzedniu i wyslaniu formularza.
tzm
20.10.2014, 14:46:06
Formularze to nie jedyna forma przesyłania danych na serwer.
nospor
20.10.2014, 14:56:06
@tzm ale to bylo do mnie?
imie_nazwisko
20.10.2014, 15:31:33
Cytat(nospor @ 20.10.2014, 13:51:15 ) *
Do przeskakiwania miedzy polami STANDARDEM jest uzywanie TABULATORA. Enter co najwyzej sluzy zatwierzedniu i wyslaniu formularza.

Mam czytnik kodów kreskowych w którym nie ma tabulatora. Przesyłanie ciągu tekstowego zakończone jest znakiem Enter
nospor
20.10.2014, 15:37:58
No i to jest wyjasnienie smile.gif

I jak masz przycisk submit to od razu po pierwszym polu śle ci sie formularz, czy moze submit tylko wplywa na brak przeskoku do nastepnego pola?
imie_nazwisko
20.10.2014, 15:46:14
Chcialbym aby button nie reagował na przycisk ENTER tylko na klikniecie muszą.
Klikniecie ENTER ma wywoływać wyłącznie przeskok do następnego Textboxa
tzm
20.10.2014, 15:51:01
Cytat(nospor @ 20.10.2014, 15:56:06 ) *
@tzm ale to bylo do mnie?


nie do Ciebie @nospor.
nospor
20.10.2014, 16:04:40
Nie pasowalo mi to do nikogo, wiec uznalem ze do mnie wink.gif
Rozumiem, ze mowisz o np. ajaxie. Wowczas wywali forma i mu nie bedzie submit reagowal na enter. Jest to jakies rozwiązanie.
imie_nazwisko
20.10.2014, 17:55:38
Pomoże ktoś przerobić kod?
trueblue
20.10.2014, 18:27:51
Dodaj do kodu:
[HTML] pobierz, plaintext 
  1. $('form.form-horizontal').keypress(function(e){
  2.  return e.keyCode!=13;
  3. });
[HTML] pobierz, plaintext
tzm
20.10.2014, 19:19:01
Cytat(nospor @ 20.10.2014, 17:04:40 ) *
Nie pasowalo mi to do nikogo, wiec uznalem ze do mnie wink.gif
Rozumiem, ze mowisz o np. ajaxie. Wowczas wywali forma i mu nie bedzie submit reagowal na enter. Jest to jakies rozwiązanie.



Otóż to. Od kąd ajaxa i js poznałem lepiej to chyba całkowicie zaprzestałem używania form, tylko div i textarea.
imie_nazwisko
22.10.2014, 06:34:35
Wielkie dzięki trueblue

Mam ponad 500 textboxów, czy poniższy kod można zapisać krótszej formie?

[HTML] pobierz, plaintext 
  1.         $("#11").keyup(function(event){ if(event.keyCode == 13){ $("#21").select();} });
  2. 	$("#21").keyup(function(event){ if(event.keyCode == 13){ $("#31").select();} });
  3. 	$("#31").keyup(function(event){ if(event.keyCode == 13){ $("#41").select();} });
  4. 	$("#41").keyup(function(event){ if(event.keyCode == 13){ $("#51").select();} });
  5. 	$("#51").keyup(function(event){ if(event.keyCode == 13){ $("#61").select();} });
  6. 	$("#61").keyup(function(event){ if(event.keyCode == 13){ $("#71").select();} });
  7. 	$("#71").keyup(function(event){ if(event.keyCode == 13){ $("#81").select();} });
  8. 	$("#81").keyup(function(event){ if(event.keyCode == 13){ $("#91").select();} });
  9. 	$("#91").keyup(function(event){ if(event.keyCode == 13){ $("#101").select();} });
  10. 	$("#101").keyup(function(event){ if(event.keyCode == 13){ $("#111").select();} });
  11. 	$("#111").keyup(function(event){ if(event.keyCode == 13){ $("#121").select();} });
  12. 	$("#121").keyup(function(event){ if(event.keyCode == 13){ $("#131").select();} });
  13. 	$("#131").keyup(function(event){ if(event.keyCode == 13){ $("#141").select();} });
  14. 	$("#141").keyup(function(event){ if(event.keyCode == 13){ $("#151").select();} });
  15. 	$("#151").keyup(function(event){ if(event.keyCode == 13){ $("#161").select();} });
  16. 	$("#161").keyup(function(event){ if(event.keyCode == 13){ $("#171").select();} });
  17. 	$("#171").keyup(function(event){ if(event.keyCode == 13){ $("#181").select();} });
  18. 	$("#181").keyup(function(event){ if(event.keyCode == 13){ $("#191").select();} });
  19. 	$("#191").keyup(function(event){ if(event.keyCode == 13){ $("#201").select();} });
  20. 	$("#201").keyup(function(event){ if(event.keyCode == 13){ $("#211").select();} });
  21. 	$("#211").keyup(function(event){ if(event.keyCode == 13){ $("#221").select();} });
  22. 	$("#221").keyup(function(event){ if(event.keyCode == 13){ $("#231").select();} });
  23. 	$("#231").keyup(function(event){ if(event.keyCode == 13){ $("#241").select();} });
  24. 	$("#241").keyup(function(event){ if(event.keyCode == 13){ $("#251").select();} });
  25. 	$("#251").keyup(function(event){ if(event.keyCode == 13){ $("#261").select();} });
  26. 	$("#261").keyup(function(event){ if(event.keyCode == 13){ $("#271").select();} });
  27.         ...
  28.         $("#501").keyup(function(event){ if(event.keyCode == 13){ $("#511").select();} });
[HTML] pobierz, plaintext
Turson
22.10.2014, 06:41:59
Można.
Niech każdy textbox ma klasę powiedzmy "textbox" i atrybut "target" z wartością, do którego selecta ten input się odnosi.
Np:
Kod
<input class="textbox" target="271"/>

$(".textbox").keyup(function(event){
if(event.keyCode == 13){
$("#"+$(this).attr('target')).select();
}
});
Riggs
22.10.2014, 08:32:04
A nie lepiej dać tabindex i przeskakiwać coś na wzór $(this).next().focus();
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.