Jump to content

Switch Froom 1 Textbox To Another


FrankBro
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Edited by Deirdre's Dad
Link to comment
Share on other sites

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;

Edited by Deirdre's Dad
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...