Button inside text input - HTML

Question

essentially I have a textbox on my webpage, and I'm trying to add a "clear" button like in iOS. I have a normal input, and an img tag (with the reset button). So far, I've used CSS relative positioning to make it look like the image is inside the textbox.

I've set the image to disappear when the text field loses focus (onfocus/onblur for the input) with javascript. I've got a few problems:

1. The onclick code never executes for the img tag because it goes away right when the input loses focus. (fixed with onmousedown but I'd like a more elegant solution)

2. I can't seem to refocus the text input after click, using document.getElementById('searchbox').focus(); (I checked the id is correct).

So I'm thinking I'm not doing this the best way, I'm wondering if I can somehow group the input and reset button better (they're both in the same li right now)? And while I'm at it, is there a way to set the hide/disappear with CSS? So like with the input#searchbox:focus selector, change the properties of img#searchreset

Thanks!

Answer 1

You can't use a javascript framework? If you can, you could use jquery for example, there are many plugins that does the trick...

Here's a tutorial:

http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

Personally, I dont like this manual "component behavior change" because if you port your application to a movile device or you use it in a browser that includes this functionallity by default this will look awful.