ios - (iPhone and iPad) when clicking outside input field never loose´s focus - HTMLJavascript - Stack Overflow

admin管理员组

文章数量:1426901

I have this Structure:
<div> <input type="text" name="pleteName" id="pleteName" value="" maxlength="50"> </div>

When clicking outside this input field on iOS (Tablet or iPhone on Safari browser), I can´t loose focus and because of that the keyboard does not hide by itself.

How can I fix this issue ? (I tested it in Android environment and it works well)

I have this Structure:
<div> <input type="text" name="pleteName" id="pleteName" value="" maxlength="50"> </div>

When clicking outside this input field on iOS (Tablet or iPhone on Safari browser), I can´t loose focus and because of that the keyboard does not hide by itself.

How can I fix this issue ? (I tested it in Android environment and it works well)

• javascript
• ios
• iphone
• ipad

Share Improve this question Follow edited Apr 24, 2018 at 11:24 José Dantas asked Apr 24, 2018 at 9:52 José DantasJosé Dantas 5177 bronze badges 5

• 2 Can you share the proper structure, not in some kind of abstracted code, but in real code? Probably, a reduction to a MVE helps – Nico Haase Commented Apr 24, 2018 at 9:56
• Hi @JoséDantas I only edit your question to remove the signature to help to your question to have "more quality" – Kalamarico Commented Apr 24, 2018 at 11:16
• Check the ment of @NicoHaase maybe it's better if you add to the question the structure – Kalamarico Commented Apr 24, 2018 at 11:23
• 1 @Kalamarico thanks :) – José Dantas Commented Apr 24, 2018 at 11:26
• 1 @NicoHaase I´ve updated the question with the current structure. – José Dantas Commented Apr 24, 2018 at 11:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

After a few days of searching I found the solution, if anyone will have this problem check this code:

var isAppleDevice = navigator.userAgent.match(/(iPod|iPhone|iPad)/) != null;

var inputs = jQuery("input");
if ( isAppleDevice ){
        $(document).on('touchstart','body', function (evt) {
            var targetTouches = event.targetTouches;
            if ( !inputs.is(targetTouches)){
                inputs.context.activeElement.blur();
            }
        });
    }

I encountered this problem only in Firefox for iOS strangely. The solution above worked, however.

Here's the VanillaJS solution:

function isiOS() { return navigator.userAgent.match(/ipad|ipod|iphone/i); }

if (isiOS()){
  var ins = [], _ins = document.querySelectorAll("input")
  for(var i = 0; i <ins.length; i++) ins.push(_ins[i])
  document.body.addEventListener('touchstart', event => {
    if(ins.filter(i => i.contains(event.target)).length == 0)
      document.activeElement.blur()
  });
}

本文标签： ios(iPhone and iPad) when clicking outside input field never loose180s focusHTMLJavascriptStack Overflow