Switch Froom 1 Textbox To Another

[FrankBro]

I need to make a time type form using 2 text box, 1 for the hours and 1 for the minutes. I need the form to be able to switch from the hours to the minutes after 2 characters are entered. I'm guessing the only way to make it is by using javascript but can't really figure how to do it.Anyone could help me.

[jeffman]

You'll need a keypress handler. This is a function that is triggered by a keypress event. It can be assigned directly to the first text element's onkeypress property (I recommend this for its simplicity) or you can use the more completed addEventListener method. The function should check the length of the value of the first text element. If the length is 2, the function should call the focus() method of the other text element.If you know some javascript, all that should have made sense. If not, holler back.

[FrankBro]

i've been trying to code this over the weekend but can't get it right.I need mostly terms to google. Everytime i type hh:mm, hours minutes , keypress listener and js on google, i get data validation codes =/

[jeffman]

It's been a while since I needed something like this, so I forgot all about the problems that come with capturing key events. In some browsers, it is not possible to tell the difference between some of the editing keys (delete, the arrows) and character keys. If you don't mind limiting your user to the backspace delete and the mouse for editing, we can use the method I described above. I have code for that if you want it. But the user experience is very annoying.Another way uses setInterval() to check the length of the first text element. Basically, every 5 milliseconds (pretty undetectable), it sees if the length is greater than 2. If it is, it erases any additional characters (usually just one), tacks those characters to the end of the second element, and changes focus to the second element.Another technique would be to replace the existing text (if any) with the new character(s). We can change to that very easily if you prefer it. Both this technique and the previous have the same outcome if the second text element contains NO text, which is how most users will experience it most of the time.Or we could simply discard the new character(s). But users might find that annoying too.Maybe there's a better technique that I don't know. It wouldn't surprise me.

function poll_text () {	var extra;	var first = document.getElementById("one");	var second = document.getElementById("two");	if (first.value.length > 2) {		extra = first.value.substr(2);		first.value = first.value.substr(0, 2);		second.value += extra; // change += to plain = if you want to *replace* the contents 		second.focus();	}}var interval;function init () {	interval = setInterval (poll_text, 5);}window.onload = init;