Quick JavaScript Tip: Auto-Highlight Form Inputs and Textareas
by Jeff Starr on Monday, December 10, 2007 – Post a Comment
I realize that probably everybody already knows this elementary and absolutely dead-simple JavaScript tip, but I was surfing around the other day and encountered a page that made great use of some auto-highlighted textarea content. The idea is simple, include a snippet of JavaScript to enable users to automatically highlight/select upon focus any chunk of text located within a form input or textarea element. I would imagine this trick works with just about any element — buttons, links, you name it. With the following code in place, content within a textarea will be highlighted/selected when the user hovers over or focuses the area. And for input elements, text will be highlighted if present, and, if not, a blinking cursor will appear, ready to serve. Very nice ;)
textarea example
<textarea readonly="true" cols="33" rows="11" onmouseover="javascript:this.focus();this.select();">
This text will be automagically highlighted upon focus..
</textarea>form input example
<input length="77" value="This text will be highlighted upon focus.." onmouseover="javascript:this.focus();this.select();" />
Focused on clean code and quality content, Perishable Press is the online home of Jeff Starr, author, artist, designer, developer, and all-around swell guy. 
Social Media
Some more than others, here are some of my favorites..