Clear button for form input field using JQuery and JQTouch

Question

I have a site built using JQTouch and want to add the little cross buttons within text input fields to clear out text on press.

I've tried emulating Google's technique from their google.com iPhone site. Also I've read about that approach over here http://stackoverflow.com/questions/613114/little-x-in-textfield-input...

I have this partially working. But whether and when a press on the cross button is registered seems unreliable.

I've created minimal code to test this:

with JQTouch - http://hogtownconsulting.com/clearquery/index.html

without JQTouch (or any other JS libraries) - http://hogtownconsulting.com/clearquery/index-no-js.html

I'm not certain that it's an interaction with the JQTouch library that's causing these problems. But the version without JQTouch does seem more responsive to taps on the cross button. Any suggestions on how I can get this feature working properly would be much appreciated. Thank you, Patrick

Answer 1

You get that little X automatically if you name your input type = search.

<input type=search name=s>

This article will help you plenty. CSS Tricks for WebKit

If you don't want that input to be a type = search, then you will have to fake it out a bit. 1. create a div and round it using css. 2. put your input in there, and remove webkit decoration, shading etc. 3. put a SPAN with your X image in to the right of the input. add an onclick to that image which clears your field.

<div><input type="text" id="thing"/><span onclick="clrField();"><img src="x.gif"/></span></div>