4

Native iOS apps contain "clear buttons" in input fields. They clear the text while maintaining field focus.

I am developing a web app targeted specifically at iOS devices, and not having any luck emulating the behavior. If I overlay another element with a click event to clear & refocus the input, the iPad ignores the call to focus because it begins hiding the keyboard the instant the blur event fires on the input (before the click event). Therefore the user must manually re-focus the field after clicking the clear icon to get back the keyboard.

Is there any way to grab a touch event on the overlay image/icon without the soft keyboard deciding to vanish, or a better way to do this?

Carson C.
  • 2,362
  • 4
  • 18
  • 20
  • 1
    I originally thought this was a duplicate of [How do I put a clear button inside my HTML text input box like the iPhone does?](http://stackoverflow.com/questions/2803532/how-do-i-put-a-clear-button-inside-my-html-text-input-box-like-the-iphone-does), but the [live example from the accepted answer](http://jsbin.com/exizep/) un-focuses and then quickly re-focuses the text field, causing the keyboard to bounce down and up. – daxelrod Nov 15 '11 at 01:51
  • 1
    See also http://stackoverflow.com/questions/613114/little-x-in-textfield-input-on-the-iphone-in-mobilesafari – daxelrod Nov 15 '11 at 01:57

1 Answers1

1

daxelrod's 2nd comment above led me to the solution: Trap the mousedown event on the clear icon, stop it, and clear the input. Thereby a "click" never occurs, and the input does not lose focus.

I thought that blur() fired at the browser level before any of the mouse events (down, up, click) did, so I didn't think to try it. Glad to see I was wrong!

In Mootools flavored JS:

document.id('inputClearImage').addEvent('mousedown', function (e) {
    e.stop();
    document.id('input').set('value', '');
});
Carson C.
  • 2,362
  • 4
  • 18
  • 20