JS Tutorial: How to make a Web page that forms auto focus

Guide: Form focus looks like a very small function, but also can improve the user experience of the site, of course, with JS implementation is very simple, this article mainly from the basic beginning to analyze how to make the form of automatic focus of the page.

In the login interface, the most important part is the Landing form table. A great promotion experience is to automatically focus on the first form box that provides user input when the page is loaded, so that users can enter it without one more click. This is used by many websites. Wikipedia, for example, is like this:

Of course, auto focus is not just for the landing interface, but for any required interface. For example, WordPress Landing backstage interface and Alipay landing interface, have adopted the method of automatic focus.

And how exactly is it supposed to be achieved? Suppose our form is as follows:

<form id= "signin" method= "post" name= "signin" action= "http://www.happinesz.cn" > <input value= "hidefor" type= "hidden" name= "Hide"/> <input id= "usr" name= "usr"/> <input id= "pwd" type= "password" name= "pwd"/> <input id= "SMBT" value= "Submit" type= "button" name= "Smbt"/> </form>

We're going to focus on id= "usr" input, and using Javascript, we can do this:

document.forms["signin"].elements["usr"].focus ();

Here's how we can use it when we know exactly where to add focus to that form. Here, elements can also use the square brackets method to get input forms, such as. Elements[0] that is the first input form. When we want to focus on the input in front of the type= "hidden" hidden input, because the hidden input is not supported. Focus, once applied, there will be JavaScript errors, to avoid such a mistake. We can search the first form, the first not hidden input, and Add. Focus: (unless you want to encapsulate, automatic judgment, otherwise, it is best not to use this method, more waste of resources ah, and if and for the)

Window.onload = function () { if (document.forms.length>0) { for (i=0;i<document.forms[0].elements.length; i++) { var oinput = document.forms[0].elements[i]; if (oinput.type!= "hidden") { Oinput.focus (); Return } } } }

Here, many sites only do here, such as I mentioned in the previous WordPress login interface and Alipay landing interface. Their goals are the same and enhance the user experience. My goal is the same. However, this sometimes, this does not necessarily enhance the user experience. Why, then?

Think about it, you have also appeared in this situation: At that time, your speed is not fast, you enter the www.alipay.com, there is no automatic aggregation, because JS has not yet loaded. However, you have entered the username and have already entered the password. Okay, stop. Let's tell a story: a long time ago, there was a name sofish, he was hanging thunder in download xxx things, anxious to use Alipay, when the page has not finished loading, enter the user name, is ready to enter the password (habitually use the Keyboard tab to switch to the password box), and then, looked up, at that time, The password appears on the box that entered the username, and a classmate is watching there.

You see, you see, is this automatic focus elevating the user's so-called experience? Here, on the contrary, it is likely that the user will be able to change the password (for example, when the RP is lower than the guy named Sofish).

Is there any way to solve it? Of course! We modified the above code as follows:

Window.onload = function () { if (document.forms.length>0) { for (i=0;i<document.forms[0].elements.length; i++) { var oinput = document.forms[0].elements[i]; if (oinput.type!= "hidden" && oinput.value==0) { Oinput.focus (); Return } } } }

However, this aggregation will automatically jump to the next non hidden input, if I am typing, it is not very uncomfortable? Well, of course not, so let's toss and make a little correction:

Window.onload = function () { if (document.forms.length>0) { for (i=0;i<document.forms[0].elements.length; i++) { var oinput = document.forms[0].elements[i]; if (oinput.type!= "hidden" && oinput.value.length>0) { Oinput.blur (); Return }else if (oinput.type!= "hidden") { Oinput.focus (); } } } }

Because there is a situation in the oinput.type!= "hidden", that is, when the user has entered, he will automatically gather to the next, so there are problems, so we let if there is already input in the case, remove all input focus, and else If the user does not have input automatically focus to the first. (Of course, if someone is accustomed to enter the password first, then enter the user name, then another way to do it).

In fact, this, sometimes useful, but sometimes equivalent to not automatically focus. However, for the protection of user input (especially passwords), I think that an improved approach would be better than automatic focus without improvement and no automatic aggregation at all. Of course, I believe that there will be a better way. Please don't hesitate to enlighten me. Others let me this love toss the JS programming college freshmen slowly found it.