Emulate the input cleanup icon in an iOS-oriented web application

Question

Native iOS applications contain “clear buttons” in the input fields. They clear the text while maintaining focus on the field.

I am developing a web application specifically designed for iOS devices, and not wanting to imitate this behavior. If I overlay another element with a click event to clear and refocus the input, the iPad ignores the focus call because it starts hiding the keyboard the moment the blur event fires at the input (before the click event). Therefore, the user must manually re-focus the field after clicking on the clear icon to return the keyboard.

Is there a way to capture a touch event on an overlay image / icon without a soft keyboard deciding to disappear, or is there a better way to do this?

Answer 1

daxelrod The 2nd comment above led me to the solution: drag the mousedown event onto the bright icon, stop it and clear the input. Thus, click never occurs, and the input does not lose focus.

I thought that blur () shot at the browser level before any mouse events (down, up, click), so I did not think to try. Glad to see that I was wrong!

In Mootools JS Flavored:

document.id('inputClearImage').addEvent('mousedown', function (e) { e.stop(); document.id('input').set('value', ''); });