Autotab populated form fields issue

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Autotab populated form fields issue

Post 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.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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 :)
Post Reply