CODEWITHSUNDEEP
iphonehtmlcordovamobileinput
Danny
Danny

Reputation: 1003

Mobile Form Fields - Losing Focus

I'm developing a mobile/web application. When I view form fields in a mobile browser, like iPhone's safari or even the chrome mobile app, I can't lose focus on form fields unless I press another form element or "Done" on the keyboard..

I've even completely stripped my code down to:

<!DOCTYPE html>
<html>
    <head>
       <title>Test</title>
    </head>
    <body>
        <form>
             <input type="text"/>
        </form>
    </body>
</html>

and I still can't lose focus (in mobile browsers) of the text field by pressing elsewhere!

Anyone have any ideas?

Upvotes: 1

Views: 2963

Answers (2)

Vytautas Butkus
Vytautas Butkus

Reputation: 5535

I had the same problem and I found this hack works

document.body.firstElementChild.tabIndex = 1

This makes the first element in the body focusable thus when you click "outside" the input it loses focus. At the same time you don't see any visual glitches on that focused element because there is not style defined (unless your first body child element is something other than div)

Upvotes: 2

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19059

Try:

document.body.addEventListener("click", function(evt) {
  var nodeName = evt.target.nodeName.toLowerCase();
  if (nodeName !== "input" && nodeName !== "textarea" && nodeName !== "select") {
    document.activeElement.blur();
  }
});

Upvotes: 2

Related Questions