I have been working on some new projects and it seems that adding some UX (user experience) makes a website flow better. Today I will be talking about how to remove default text from a textbox by simply clicking on it or by using the onFocus function with JavaScript.
So… I have a textbox for a search function on a page that I set to display “Enter Search Terms…” by default. The goal is, when the user clicks on the text area, the default text disappears. With the default text gone, the user can type what they want without having to manually delete the default text.
This task can be accomplished by adding a very small piece of javascript code to the textbox HTML.
For example:
<div style="padding:10px;">
<h2 style="padding: 0px; margin 0px;">Find More Stuff...</h2>
<form id="form1" name="form1" method="get" action="/find-stuff.php">
<input name="q" type="text" id="q" value="Enter Search Terms..." onFocus="javascript:this.value=''" />
<input type="submit" name="button" id="button" value="Submit" />
</form>Notice “onFocus” in bold above…
To accomplish the goal of deleting text when clicking on a text area – add to your text input code.
Comments