Auto-Focus Input_input auto-focus-CSDN博客

打开hao123主页，光标马上就会停在百度的搜索框里，打开百度也是这样，访客可以直接输入关键字来搜索，而不用将光标指在输入框并点击才激活，这样也就方便了网民。

这是怎么实现的呢？其实也就是一段JavaScript代码而已，看下面的代码：

把body标签改成：

<body onLoad=”document.Gonten_form.Gonten_input.focus()”>

其中Gonten_form 为表单名，Gonten_input为输入框名称

需要聚焦的输入框：

<form method=”get” name=”Gonten_form” action=”"><input type=”text” name=”Gonten_input” size=”20″ /><input type=”submit” value=”搜索” /></form>
本文来自: www.Gonten.com 详细出处参考：http://www.gonten.com/javascript-input-focus/

Auto-Focus Input

Posted by Chris Morrell on August 21st, 2008 in Web Development(tagged frustrations, javascript, Web Development)

OK, this has bugged me for a long time. Many times I’ll come to a site which helpfully auto-focuses on the input element I’m most likely to use (either theusername field of a login form, or the query field of a search form). But if the script to make this happen is slow, I’ll often find myself typing over my already half-written search query, or even worse, typing my password (in plain text) into the user name field.

I’ve come up with a few possible solutions. To start, you could just skip the auto-focus code all together and let your users manually select the input they want to type in. This can be fine, but in my opinion, what separates good UI from great UI is when the system seems to know what you want and is one step ahead of you. So how can we avoid the problem while still providing the functionality?

Update: Latest Technique

Commenter Joe points out that all three of these techniques fail if you use your browser’s autocomplete to pre-populate the field, but want the web page to focus on the field so you can either hit return or enter a custom username. To handle this scenario I’ve come up with a new recommendation based on focus rather than content:

 
     1<script type="text/javascript">
 
     2$(document).ready(function() {
 
     3    var el = $('#query')[0];
 
     4    if (true !== el.hadFocus) {
 
     5        el.focus();
 
     6    }
 
     7});
 
     8</script>
 
     9<input type="text" onfocus="this.hadFocus = true;" id="query" />

So now, instead of checking to see if there’s any content in the “query” field, we’re checking to see if the user has focused on it. If they haven’t, it’s safe to change the focus there. If they have, you know they’re ahead of your code, and you can just get out of the way.

You might want to expand this to check if any field has been focused on. That way if someone starts typing in your search box, you don’t accidentally send them to the username field. But in general, something like the code above should be good in most situations.

Let me know if you see any potential problems.

Here are the approaches I’ve toyed with.

Option 1: Inline JavaScript

 
     1<input id="username" name="username" type="text" />
 
     2<script type="text/javascript">
 
     3<![CDATA[
 
     4if (document.getElementById)
 
     5     document.getElementById('username').focus();
 
     6]]>
 
     7</script>

In simple situations (where the web app uses little to no other javascript), this is the option I go with. But it assumes a modern browser is available. And while you could use a Javascript framework to support more browsers, then you’d have the associated lag from loading the framework, which could reintroduce the original problem. That leads me to option 2…

Option 2: Check Before Focus

 
     1window.addEvent('domready', function() {
 
     2    var field = $('username');
 
     3    if (field.value.length == 0) field.focus();
 
     4});

In this scenario, you run your auto-focus code once your framework (in this case mootools) and the DOM have loaded, but you check to see if the field has been typed in first. That way, if I type faster than your CDN loads, the code just doesn’t run. If you’re using a javascript framework, this is probably the best option.

There’s one other approach that I’ve always thought was interesting, but really doesn’t work in the end. I’m just putting it here for the fun of it…

Option 3: Make Them Wait

First, output a disabled form element via javascript:

 
     1document.write('<input id="username" disabled="disabled" name="username" type="text" />');

Then, output an enabled element in noscript tags (just in case):

 
     1<noscript>
 
     2<input type="text" name="username" id="username" />
 
     3</noscript>

And finally, run your code on DOM Ready:

 
     1window.addEvent('domready', function() {
 
     2    var field = $('username');
 
     3    field.disabled = false;
 
     4    field.focus();
 
     5});

This way the input is disabled until your code loads. Though technically that method would work, it’s more likely to frustrate your power-users than enhance their user experience.

Have other people experienced this frustration? If you’re a web developer, are there other ways you have dealt with it? Leave a reply, or reply to@inxilpro on twitter.