Welcome to the new design! Please report any bugs or issues, thanks :)
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 = Creative thinker. Passionate about free and open Web.
The Tao of WordPress: Become your own WordPress guru.

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 »
WP Themes In Depth: Build and sell awesome WordPress themes.
Thoughts
What's up with Plesk UI lately? Especially on Chrome it looks just awful, all kinds of broken. Come on Plesk devs get it together.
Things get stressful, I try to pray. Not always easy, but always helps to relax and regain focus.
Nice new speed checker at fastorslow.com.
Easy way to exclude certain tests from WP Site Health: Site Health Tool Manager
Excellent (and free) tool for getting tons of site SSL infos: whynopadlock.com
Everyone just stay home and hide forever. Brilliant idea.
Playing with Microsoft Edge browser on macOS. It's like 1998 all over again.