Book Sale! Save 20% on WordPress books with discount code: SAVE20
Web Dev + WordPress + Security

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

Jeff Starr
About the Author
Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
Banhammer: Protect your WordPress site against threats.

One response to “Quick JavaScript Tip: Auto-Highlight Form Inputs and Textareas”

  1. Anant Mohan Verma 2010/05/11 9:59 am

    This is very useful information for me and for others users. I would like appreciate it.

    Thanks for the nice sharing.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
The Tao of WordPress: Become your own WordPress guru.
Thoughts
When an app won’t hide, you can force it by holding the ⌥ (option) key and clicking anywhere on the desktop.
Currently having a blast redesigning Plugin Planet, so much work so little time.
Thanks to David McCan over at WebTNG for the awesome BBQ Pro review.
Enjoyed a nice mini-vacation with my fam. Great way to recharge and regroup.
Nice little interview with yours truly over at ThemeIsle. WordPress, web dev & more!
Perishable Press celebrating 16 years online! An incredible, rewarding journey.
Thanks to Nicholas Ferrell for his excellent and thorough review of Wutsearch search-engine launchpad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.