Quick JavaScript Tip: Auto-Highlight Form Inputs and Textareas

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.

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();" />

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 ;)

About the Author

Jeff Starr = Web Developer. Security Specialist. WordPress Buff.