0

I'm encountering an issue which seems to occur only in standalone mode of a HTML5 app which I saved to the Home screen of my iOS device.

By standalone mode, I mean a HTML web app with the following metatag:

<meta name="apple-mobile-web-app-capable" content="yes">

The javascript (written in coffeescript) in question is the following:

$( ->
  $(document).on('click', 'input', (e) ->
    alert('click')
  )

  $(document).on('focusout', 'input', (e) ->
    alert('blur')
  )
)

These are delegated event handlers to handle dynamically injected <input> elements. The alert() messages show up fine in Mobile Safari. However, when the web app is viewed in standalone mode (i.e., launched from the Home screen), the events do not fire.

I'm using jQuery v1.10.2 if that's helpful.

John
  • 9,254
  • 12
  • 54
  • 75

1 Answers1

0

I have ran into a similar issue where dynamically created inputs don't have a cursor or allow you to type in them when you click/touch the input for the first time. The keyboard comes up, and the page scrolls which makes it appear that the input is selected, but in fact, it's not. A second touch/click in the input puts the cursor in the input, and allows text to be inputted.

My workaround was to attach a touchend event to that particular input, and then focus that input again programmatically using jQuery's focus(). I had to use touchend because the click event wouldn't fire in standalone mode.

Below is a code snippet, you'll have to excuse the syntax, I'm using Backbone. This is the method called on touchend of my input.

clickedInput: function (e) {

    if (window.navigator.standalone) {

        $(e.currentTarget).focus();

    }

}
TaylorJ90
  • 1
  • 2