An Easy Fix for a Minor Annoyance When Creating Widgets or Shareable Content
For the last couple days I’ve been dabbling with creating a Javascript that will allow visitors to one of my websites to embed my content in their sites. (It’s done and you can check it out at http://www.angieshealth.com/article-widget/)
To make it easier on my visitors when copying and pasting the code I decided to use Javascript to select all the code when they click on the textbox.
A lot of video sharing sites use this method to let you grab code to embed content in your site. I’ve always been a little bit annoyed at the way they execute it, though. When you click on the textbox the entire text will be selected, but clicking a second time will not allow you to break out of this behavior. If I, the user, want to be able to scroll through the text to see exactly what it is I am copying it becomes a little bit of a headache to do so.
You can see an example of this behavior at YouTube. Just go to a video and try clicking on the embed link. Click it again and you get the same thing.
With a couple extra bytes of code you can still provide this functionality and keep your textbox accessible to your visitors.
<input type="text"
onclick="if(!this.selected) { this.select(); this.selected = true; }"
onblur="this.selected=false;" />
I know it’s a little thing but in my opinion it’s the little things that matter.
