Jump to content

How do you move the insertion point to the next field...


Nhoj

Recommended Posts

I have a page with the numbers 0 - 9 all on separate buttons laid out like a phone's keypad and above it I have 5 form boxes where 2 digits can go in each box...

What I cant figure out how to do is make it so users can click the buttons (the keypad) and fill up each box one digit at a time moving from one box to another automatically when each previous box gets 2 digits in it.

Can anyone help out?

Here's a screenshot of the page...

http://img243.imageshack.us/img243/3135/untitled1xn8.gif
Here you go:
[code]
<script language="javascript" type="text/javascript">
function fillWidthDigits(digit){
  var digits = document.getElementById('digits')
  var inputs = digits.getElementsByTagName('input')
 
  for (var i=0;i<inputs.length;i++){
      if (inputs[i].value.length<2){
          inputs[i].value+=digit
          break // if we found an input with the length<2 there's
// no need to continue so
// we break the for loop
      }
  }
}
</script>
<form id="digits" action="" method="get" onsubmit="return false;">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>
<form id="buttons" action="" method="get" onsubmit="return false;">
<input type="button" onclick="fillWidthDigits(this.value)" value="1" />
<input type="button" onclick="fillWidthDigits(this.value)" value="2" />
<input type="button" onclick="fillWidthDigits(this.value)" value="3" />
<input type="button" onclick="fillWidthDigits(this.value)" value="4" />
<input type="button" onclick="fillWidthDigits(this.value)" value="5" />
<input type="button" onclick="fillWidthDigits(this.value)" value="6" />
<input type="button" onclick="fillWidthDigits(this.value)" value="7" />
<input type="button" onclick="fillWidthDigits(this.value)" value="8" />
<input type="button" onclick="fillWidthDigits(this.value)" value="9" />
<input type="button" onclick="fillWidthDigits(this.value)" value="9" />
</form>
[/code]

Cheers

edit: you can put a readonly attribute for the textboxes so they get the values only from the buttons

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.