I’m going to try using posterous’s code tags to make my first code post on this blog. Bear with me if things don’t work out perfectly.
The designer on a project I’m working on (www.alertzy.com) wanted to have the effect where there is default text inside a text field, but it clears once the user clicks in the box. The effect looks like this, before and after a user clicks on the text field (thanks to www.meshcanada.com for this example):
As I am building this project in Ruby on Rails, I decided to write a simple helper to accomplish this behavior. The helper itself is pretty straightforward, and I’ll leave dissecting the code as an exercise for you. If you have any questions or suggestions for improvement feel free to post them in the comments. Place this code in your application_helper.rb file in your Rails project.
def default_text(text)
onFocusFunction = "field = event.target || event.srcElement; if (field.value=='#{text}') {field.value = '';}else {return false}"
onBlurFunction = "field = event.target || event.srcElement; if (field.value=='') {field.value = '#{text}';}else {return false}"
{:value => text, :onfocus => onFocusFunction, :onblur => onBlurFunction}
endThen in your views you can simply call this helper function in the parameters of a field to add this behavior. Here is an example for a text field for the users username which will display the text “Login” in the field.
<%= text_field_tag 'login', @login , default_text("Login")%>
The end effect of this will look like this:
Happy Coding!
Update August 20th/2010: It was brought to my attention that this helper wasn’t working in Internet Explorer. This is because IE uses event.srcElement instead of event.target. The code in this post has been updated to reflect this and should now work cross-browser.
Update August 28th/2010: I had forgotten that this functionality has been added to text fields in HTML 5 under the attribute “Placeholder”. This technique is still useful for getting this functionality in non-HTML 5 compliant browsers.