Forum PHP.pl > Klawiatura ekranowa + formularz

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Klawiatura ekranowa + formularz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Jarek3366

1.04.2015, 11:25:58

Witam
Jestem początkujący w jacaScript i próbuje napisać pewien skrypt. Strona ma działać na tablecie dlatego jest to klawiatura numeryczna + formularz. Problem polega na tym ze po wpisaniu pierwszych czterech cyfr automatycznie skrypt ma nas przenieść do okna następnego i teoretycznie się tak dzieje ale po wciśnięciu kolejnej cyfry pojawiają się one w nowym jaki i w starym oknie. Proszę o pomoc oto kod:

[HTML] pobierz, plaintext 
<html>
<head>
 
<table>
<tr>
<td><input class="calc" type="button" style="font: 15pt Arial;width:100px; height:50px;" value=1 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" style="font: 15pt Arial;width:100px; height:50px;" value=2 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" style="font: 15pt Arial;width:100px; height:50px;" value=3 onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" style="font: 15pt Arial;width:100px; height:50px;" value=4 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" style="font: 15pt Arial;width:100px; height:50px;" value=5 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" style="font: 15pt Arial;width:100px; height:50px;" value=6 onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" style="font: 15pt Arial;width:100px; height:50px;" value=7 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" style="font: 15pt Arial;width:100px; height:50px;" value=8 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" style="font: 15pt Arial;width:100px; height:50px;" value=9 onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" style="font: 15pt Arial;width:100px; height:50px;" value=0 onclick="pushButton(this.value);"></td>
<td></td>
<td><input class="calc" type="button" style="font: 12pt Arial;width:100px; height:50px;" value="WYCZYŚĆ" onclick="pushButton(this.value);"></td>
</tr>
</table>
 
<script>
function pushButton(buttonValue) {
	 if (buttonValue == 'WYCZYŚĆ') {
          document.getElementById('screen').value = '';
		  document.getElementById('screen2').value = '';
		  document.getElementById('screen3').value = '';
     }
     else {
 
		  document.getElementById('screen').value += buttonValue;
 
 
 
		if(document.getElementById('screen').value.length > 4){
         document.getElementById('screen2').focus();
			document.getElementById('screen2').value += buttonValue;
 
 }
		if(document.getElementById('screen2').value.length > 2){
         document.getElementById('screen3').focus();
			document.getElementById('screen3').value += buttonValue;
 }
 }
 
	 }
 
</script>	
 
</head>
    <body>
	<form>
        <input type="text" class="calc" id="screen" name="screen" size="3" maxlength="3" value="" />
        <input type="text" class="calc" id="screen2" name="screen2" size="3" maxlength="3" value="" />
        <input type="text" class="calc" id="screen3" name="screen3" size="4" maxlength="4" value="" /><br />
    </form>
    </body>
</html>
[HTML] pobierz, plaintext

Turson

1.04.2015, 12:39:56

http://jsfiddle.net/7bdpdmrc/
Pytanie ile cyfr można wpisać w poszczególnych oknach

Jarek3366

1.04.2015, 12:54:53

Super dzięki o to mi chodziło

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.