1 Stupidly Simple Way to Make Users VERY Happy
This post will teach you how to automatically put cursor in form field – click here to drop down to the tutorial below.
If you’re like me, you like to try to use your keyboard as much as possible.. or use your mouse as little as possible.
So when you go to log into a website and the username field doesn’t automatically have the cursor in it when the page loads, you get a little frustrated.
Oh, that only happens to me?
No but seriously, shouldn’t all websites automatically put your cursor in the form field which you most likely want to fill out?!
Go to http://www.gmail.com – if you were logged in already, log out and then go to there.
Did you notice how the username box is automatically highlighted, the cursor is already in there, and you’re ready to type? Did you like that?
If you’re like me, you LOVED it! (I’m weird, have you got that by now?)
This is something that is super simple to do, and should definitely be done if you:
- Have a login screen
- if someone is coming to your site to log in, they would really appreciate the username filed being auto-focused.
- Have a popular online tool that people use
- Do a Google search for “Character Count” – The number 1 and 2 results should be javascriptkit.com and lettercount.com… LetterCount.com auto-focuses the textarea field, whereas javascriptkit.com does NOT… therefore, I will link to and use lettercount.com for my character count needs.
- Want someone to fill out your form
- think about it… user comes to your site and lands on a page that has a lead capture form. If they see the first box of that form is already highlighted and has the cursor in there, ready to be typed into, they are more likely to fill it out! Make sure you know the secrets to turning leads into sales, otherwise: don’t waste your money on any form of marketing, OK?
How to Automatically Place Cursor In Text Field
It’s really easy if you:
- If you understand HTML & javascript relatively well
- Have access to the source code of your site.
If you aren’t comfortable with HTML or javascript – OR – don’t know how to access the source code of your website… get in touch with us, we will figure it out (call 888-WEB-NUM1).
All you have to do is add this javascript to the page(s) you want the form field to automatically focus on:
<script type="text/javascript">document.theFormID.theFieldID.focus();</script>
Note: With this method, you MUST put the javascript line BELOW the form in the HTML. Otherwise, it will try to execute and won’t find the form (because it hasn’t rendered yet). There is an alternative method below.
Let’s do a quick breakdown of the pieces at work here, but first, make sure you know what an HTML element id is.
Your form and input box might be something like this:
<form action="" method="get" id="theFormID">
<input name="username" id="theFieldID" type="text" />
</form>
The id of both the form and input elements are theFormID and theFieldID, repsectively. If your
See an example here: https://www.webmechanix.com/auto-focus-text-field.html
Another Method to Auto Focusing Text Fields (On Page Load)
There is another, very similar, way to automatically put the cursor in the input field when the page loads.
This time, add this code to thetag, like this:
<body onload="document.theFormID.theFieldID.focus();">
onLoad is a built in javascript function which (when put on thetag) runs when the entire page has loaded.
Note: This method doesn’t seem to be working in IE7 or 8 (lame sauce). So let’s try using the document ready javascript function
In the first example I noted that you have to put that javascript below your form so the focus(); function would be able to find the form elements (load order)… but with this example, the code would obviously be above the form HTML… but since it runs AFTER all the HTMl on the page is loaded, it will surely find the input or text field you want to automatically put cursor in.
Yet Another Method to Automatically Putting Cursor In Text Field On Page Load
What? Another method… yeah, that’s right — And this one works in ALL BROWSERS! (correct me if I’m wrong)
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
document.homeform.input.focus();
});
</script>
What this is doing (somewhat brilliantly in my opinion) is telling the javascript function to run after the page has loaded (similar to the method above using. For some reason, it works in all browsers – so I would recommend using this method.
So that’s it… go implement this on your website and make your visitors smile 🙂
UPDATE 8-24-12
It was brought to our attention (by Dave Roche) that the following function might work better:
function SetFocus () {
var input = document.getElementById ("theFieldID");
input.focus ();
}
You will have to call this function when the page loads using eitheror jQuery.document.ready.
BONUS: Another Simple Way To Make Users Happy
One other pet peeve of mine is when the tabindex of form input fields are not set up properly. For instance, click into the first box below, then press tab…
… Shouldn’t it go from the first box to the second, THEN to the third? “Yes Arsham, it should… why doesn’t it?”
Because the tabindex is all screwed up. This usually happens when there is more than one form on one page.
So if this is happening to your form input boxes and you don’t know how to fix it, call us @ 888-WEB-NUM1 (or fill out this form)
Most newsletters suck...
So while we technically have to call this a daily newsletter so people know what it is, it's anything but.
You won't find any 'industry standards' or 'guru best practices' here - only the real stuff that actually moves the needle.
You may be interested in:
How to Build Dynamic Reports in Google’s Data Studio
May 1, 2017
