Page 1 of 1

Autotab populated form fields issue

Posted: Thu Jan 18, 2007 5:47 pm
by RobertGonzalez
Ok, I must admit that my client side capabilities are failing me miserably. Can someone shed some light on this for me?

I have the following javascript that checks the length of a value of a form field against the maxlength value, and when it is reached, pushes the focus out of the input into the next one specified. This works as expected.

Code: Select all

function tabOut( thisField, nextField )
{
	if (thisField.getAttribute)
	{
		if ((thisField.nodeName.toLowerCase() == "input" && thisField.value.length == thisField.getAttribute("maxlength")) || thisField.nodeName.toLowerCase() == "select")
		{		
			document.getElementById(nextField).focus();
		}
	}
}
What is throwing me is how to allow someone to not get bumped if they just got into that field. What is happening is that when you focus on the field, if it is populated with the maximum number of characters allowed, it pushes focus to the next field. This means that someone cannot land there and delete the text in the field. It can be highlighted with the mouse, but not controlled with the keyboard immediately (you can after you were bounced).

Can someone please help me figure this out? As always, your help is much appreciated.

Posted: Thu Jan 18, 2007 6:22 pm
by nickvd
What I would do is:

Prior to kicking the user from the input field, save the contents of the box in a variable.
Next time they enter the input, compare the current contents to the 'previous' value, if they match, dont kick them.

Code: Select all

var oldValue = ''; // global or refactor into a self contained object
function tabOut( thisField, nextField )
{
if (oldValue == thisField.value) return false; //NVD
        if (thisField.getAttribute)
        {
                if ((thisField.nodeName.toLowerCase() == "input" && thisField.value.length == thisField.getAttribute("maxlength")) || thisField.nodeName.toLowerCase() == "select")
                {              
                        oldValue = nextField.value; //NVD
                        document.getElementById(nextField).focus();
                }
        }
}
I have not tested the above code, however I've used the logic behind it a few times to deal with things like a search field that has a default value ("Search Keywords Here"), and when you click the field, it either selects the text, or removes it completely, yet it won't delete the text if it's not the default (i.e. if you've entered keywords and then change your mind)

I'm in a rush, so I hope my ramblings are making sense :)