Text Field Auto-Fill
A brief break from the eye-bleeding CSS talk. LOL! ;o)
I needed a text field to be prefilled with text. If the user clicked on it, the text would clear out. If they “left” the text field (changed focus) without changing it - I needed it to revert back to the original text. If they DID enter information in it, I needed it to NOT revert back to the original text. (Clear as mud?)
Here’s what I mean:
Here’s how (and why) I did this:
<input name=”search” type=”text” onFocus=”if(this.value==’Search’)value=”” onBlur=”if(this.value==”)value=’Search’;” value=”Search” size=”10″ maxlength=”200″>
I needed to do this on a site I was working on because I didn’t have enough room for a label on the field - but still needed to “explain” what the field was.
April 1st, 2004 at 11:40 am
Excellent tip, Jen! I can see some uses for it right now..
April 1st, 2004 at 4:09 pm
You could combine this with a dropdown box and that would make it a editable dropdownbox
April 1st, 2004 at 6:07 pm
http://www.versiontracker.com uses the same technique (look in the top right hand corner).
Good tip.
BTW - how do you get the graphic/code thing working - this seems to me to be the solution to the spam i am getting on my blog.. if you could email me that would rock.
Cheers.
April 2nd, 2004 at 3:42 am
Great tip!! Thanks so much, this is indeed helpful!
April 2nd, 2004 at 4:19 am
Since you are learning CSS, you may want to improve your code with visual cues…
onFocus=”if(this.value==’Search’){value=”;this.style.color=”#CCC”;this.style.fontWeight=”normal”;}”
onBlur=”if(this.value==”){value=’Search’;this.style.color=”#000″;this.style.fontWeight=”bold”;}”
Or you could create a class to change those properties, like this:
onFocus=”if(this.value==’Search’){value=””;this.className=”noText”}
onBlur=”if(this.value==”){value=’Search’;this.className=”"}”
April 2nd, 2004 at 6:27 pm
Duncan,
She’s using James Seng’s Scode.
You can download it here (it has instructions inside): Scode
I’ve been using it since October (about a month after I converted my blog to Movable Type) and I haven’t gotten a SINGLE comment spam! Just, as Jennifer and I have done, make sure you put a disclaimer under it with an e-mail address or link where people can mail comments. You don’t want to strand viewers using text browsers. What I did is include a link to a form where they can e-mail me, and I have the link pass on the entry id via PHP, so when I get the mail, I know what entry they are commenting on.
And finally, Jennifer, this is some really slick code… I can’t tell you how frustrating it is when people put default text in there, and you HAVE TO ERASE IT. Ugh. This is much better.
April 5th, 2004 at 7:42 am
One little tweak:
Although it is in good JavaScript “form” to capitalize functions likeIAmDoingHere, and is fine to do within a <script> tag, the XHTML validator will yell at you if you do it within a link. So anyone who cares about valid XHTML should change “onFocus” and “onBlur” to “onfocus” and “onblur”.
April 13th, 2004 at 9:40 pm
Using a piece of code posted to Scripty Godesses page, I now have the Search bar in the top right a little more compact than it was … not a big tweak, but cool non the less….
April 13th, 2004 at 9:40 pm
Using a piece of code posted to Scripty Godesses page, I now have the Search bar in the top right a little more compact than it was … not a big tweak, but cool non the less….
April 25th, 2004 at 5:34 am
OK. Confession time here: I’ve never written a script in my life, but I am a computer-literate user of a system that’s under construction where we’d really like to be able to have a combi box (i.e. something you can type into that ALSO drops down, preferably showing just those items in the drop down list that match what’s already been typed - though frankly, the string matching part of it would be a bonus).
If it helps to understand what we’re after, it’s an order processing system, and the idea is to be able to type a product code if you know it (in which case the product description then gets added to a separate box), but have a dropdown list of options to choose from if you don’t know the product code or can only guess at part of it. As an extra challenge, ideally the dropdown list would display both the code and the description field (but only select the code to fill in the code box).
At the moment, we have a text entry box. If the script finds an exact match to the product code entered by the user, it fills in the description in another (editable) text box. Otherwise it populates new drop down boxes with items that contain the text either in the product code or the description, which is somewhat clumsy, and then the product code can be selected from these, and the description filled in on the Product Description text box as before. (NB: The code and description are held separately because customers never get to see the product code, but we use it internally for sales reports.)
So, I was very interested in Xipoher’s comment above “You could combine this with a dropdown box and that would make it a editable dropdownbox”. How would you do this? I’ve been searching the web for ages now to find a way to do it with no success.
April 27th, 2004 at 2:49 pm
Funny thing…
When I add name and id attributes to my input field like this:
<input type=”text” onfocus=”if(this.value==’url’)value=”;” onblur=”if(this.value==”)value=’url’;” value=”url” id=”url” name=”url”/>
the onfocus and onblur only work after I click in the field
Any ideas why? I’ve tried everything!
April 27th, 2004 at 6:21 pm
So this works great but how do I adapt it to work on a text area?
I need the multi line text area to have the “Message:” disappear when you click into that area. I want it to be consistent with the other form elements that I have established.
April 27th, 2004 at 6:22 pm
So this works great but how do I adapt it to work on a text area?
I need the multi line text area to have the “Message:” disappear when you click into that area. I want it to be consistent with the other form elements that I have established.
April 27th, 2004 at 6:36 pm
It’s slightly different with a textarea, because the default value isn’t specified in a value=”Message:” switch, but is actually between the starting and ending textarea tags. So this is what you want.
April 27th, 2004 at 6:49 pm
Actually, I just discovered that the this.defaultValue method works for text inputs as well. You still have to specify a value=”Search” switch, but instead of having to specify it 3 times like in Jenn’s original method, you only have specify it as the value once.
Like so:
May 11th, 2004 at 11:45 pm
I’m creating a proposal for a possible corporate client and…
June 22nd, 2004 at 6:44 am
Scripty Goddes shows how to pre-fill a field entry and how to auto-clear it if the user clicks on the field….