Geek Answers Handbook

Button inside text input - HTML

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

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

  • Onclick code is never executed for the img tag because it goes straight when the input loses focus. (fixed with onmousedown, but I would like to get a more elegant solution)

  • I cannot override text input after clicking using document.getElementById ('searchbox'). focus (); (I checked that the identifier is correct).

So, I think that I am not doing it in the best way, I wonder if I can somehow group the input and the reset button better (are they both in the same one right now)? And while I'm in it, is there a way to set hide / fade using CSS? So, for example, using the input # searchbox: focus selector, change the img # searchreset properties

Thank!

+5
source share
3 answers

I created something similar for the project I was working on . The main difference is that the image was visible at any time for reasons of usability.

:

, , , . Apple . css sprite () svg . , " ", , ,

, , , " ". , , CSS, .

/:

CSS . , , - . javascript, , "" , "".

JS:

() HTML . . , , jQuery, . .

, .

0

javascript? , jquery, , , ...

:

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

" ", , , .

+2

Some code would be helpful. I also understand. Do you want a background image in your text space?

0
source

More articles:


All Articles