Spring Sale! Save 15% on WordPress books with code: SPRING22
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 = Designer. Developer. Producer. Writer. Editor. Etc.

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 »
Banhammer: Protect your WordPress site against threats.
Thoughts
Coding never ends. Bring a snack.
Not posting anything online usually means I’m busy working on my next project.
Today is my 50th B-day :)
Deep in the code.
Making good progress on my next pro plugin, Simple Ajax Chat Pro :)
Events definitely are speeding up. For those who are paying attention.
New wave of spam comments easily blocked, add =https:// to WP Discussion settings ▸ Disallowed Comment Keys.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.