Skip to content
This repository was archived by the owner on Jun 9, 2022. It is now read-only.
This repository was archived by the owner on Jun 9, 2022. It is now read-only.

can not bring up keyboard instantly in ios 11.3 #548

Open
Open
can not bring up keyboard instantly in ios 11.3#548
@F-12

Description

@F-12
F-12
opened on Apr 4, 2018 · edited by F-12

There is a weird behavior in ios 11.3.
From the second time I click the input element on,
the keyboard does not show up when i quickly click the input.
Only if i keep touching the input, the keyboard shows up.

Use code below to reporduce the problem.

<html>
<head>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

        <meta charset="UTF-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no, email=no">            
</head>
<body>
    <input type="text" placeholder="test" />
    
    
    <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.js"></script>
    <script>
        window.FastClick.attach(document.body);
    </script>
</body>
</html>

Activity

tabtang

tabtang commented on Apr 8, 2018

@tabtang
tabtang
on Apr 8, 2018

I encountered it too. There seems to be a big problem on IOS 11.3, mainly on form elements.

InternetExplorer8

InternetExplorer8 commented on Apr 10, 2018

@InternetExplorer8
InternetExplorer8
on Apr 10, 2018

Any workarounds for this?

jzlingmo

jzlingmo commented on Apr 11, 2018

@jzlingmo
jzlingmo
on Apr 11, 2018 · edited by jzlingmo

+1. focus() is not working in onTouchEnd, only when the function call is immediately following a touch/click interaction.Adding click function to the element to invoke focus function just works fine. Or any better solution?

<html>
<head>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

        <meta charset="UTF-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no, email=no">            
</head>
<body>
    <input id="test" type="text" placeholder="test" />
    <input id="test2" type="text" placeholder="test" />
    
    <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.js"></script>
    <script>
        window.FastClick.attach(document.body);
        document.getElementById('test').onclick = function(e) {
          // works fine
          e.target.focus();
        };
        document.getElementById('test2').onclick = function(e) {
          // not working
          setTimeout(function() {
            e.target.focus();
          }, 50)
        };
    </script>
</body>
</html>
tabtang

tabtang commented on Apr 11, 2018

@tabtang
tabtang
on Apr 11, 2018

There is a more serious problem. When "home" is pressed away from browser temporarily, all elements are clicked without response.

ronnievdc

ronnievdc commented on Apr 11, 2018

@ronnievdc
ronnievdc
on Apr 11, 2018

The people behind Framework7io could have found the reason and solution.

Seems to fixed now. Issue was due to iOS bug reporting touch event timestamp as negative value
framework7io/framework7#2314 (comment)

The commit that fixes the problem could be found here: framework7io/framework7@ac02ad1

tabtang

tabtang commented on Apr 12, 2018

@tabtang
tabtang
on Apr 12, 2018

@ronnievdc
According to the solution you have reissued, problem 2 has been solved.
But the bug of the form element has not been solved yet

slinhuang

slinhuang commented on Apr 13, 2018

@slinhuang
slinhuang
on Apr 13, 2018

change the focus method,
FastClick.prototype.focus = function(targetElement) {
'use strict';
targetElement.focus();
};

vahvarh

vahvarh commented on Apr 16, 2018

@vahvarh
vahvarh
on Apr 16, 2018

line 336 you there is a bug:
if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {

should read

    if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== -1 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
yylgit

yylgit commented on Apr 17, 2018

@yylgit
yylgit
on Apr 17, 2018 · edited by yylgit

@tabtang
image

add targetElement.focus();
i use this method solve this problem

tabtang

tabtang commented on Apr 17, 2018

@tabtang
tabtang
on Apr 17, 2018

@yylgit 解决了，哥们！

yylgit

yylgit commented on Apr 17, 2018

@yylgit
yylgit
on Apr 17, 2018

@tabtang 怎么解决的姐们，是用我写的这种方法吗

ButchMonkey

ButchMonkey commented on Apr 17, 2018

@ButchMonkey
ButchMonkey
on Apr 17, 2018

Text areas also seem to be affected

tabtang

tabtang commented on Apr 20, 2018

@tabtang
tabtang
on Apr 20, 2018

@yylgit 是用的你的方法！（我也是哥们）

tabtang

tabtang commented on Apr 20, 2018

@tabtang
tabtang
on Apr 20, 2018

我这里试了 textarea也没有问题了

maxcong

maxcong commented on Apr 27, 2018

@maxcong
maxcong
on Apr 27, 2018

楼上：yylgit 修改为正解，亲测可用

lasselaakkonen

lasselaakkonen commented on May 3, 2018

@lasselaakkonen
lasselaakkonen
on May 3, 2018 · edited by lasselaakkonen

I was running in to this issue on iOS 11.3 + iPad + Cordova + UIWebView + Fastclick 1.0.6.

This issue did not happen on iOS 9.3.5 + iPad + Cordova + UIWebView + Fastclick 1.0.6.

I was able to reproduce it by:

  • Opening a page with a datetime input and a text input
  • Tapping the datetime input, so it shows the selection popup
  • Tapping outside the popup to close the popup
  • Tap quickly on a text input
    -> The text input is not focused and keyboard is not shown
  • Tap and keep pressing for a short while on the text input
    -> The text input is focused and keyboard is shown

As @yylgit said, adding targetElement.focus(); before targetElement.setSelectionRange(length, length); fixes the issue. No idea why, but it apparently does.

Does anyone know if adding that focus() call breaks anything else?

lasselaakkonen
added a commit that references this issue on May 3, 2018

ftlabs#548 Fix focusing on form elements, when tapping fast.

ba09aec
blakgeek
added a commit that references this issue on May 6, 2018

Merge pull request #2 from lasselaakkonen/548-ios-clicks-on-inputs-fa…

7c7088c
prvinuch

prvinuch commented on May 12, 2018

@prvinuch
prvinuch
on May 12, 2018

to me as well... targetElement.focus(); before targetElement.setSelectionRange(length, length); fixes the issue.

geraldlrh

geraldlrh commented on May 31, 2018

@geraldlrh
geraldlrh
on May 31, 2018

iOS11.3 fastclick.js 相关bug
这里有篇文章讲这个原因

xiruiZeng

xiruiZeng commented on Jul 19, 2018

@xiruiZeng
xiruiZeng
on Jul 19, 2018

@yylgit 你好，我是11.4的系统，打包hbuilder打包APP之后在ios上input输入框不能轻触弹出键盘，而要在输入框上停留一段1秒左右才会弹出键盘，以上你们讨论的方法我试了些还是不行，请问可以指教一二吗？

xiruiZeng

xiruiZeng commented on Jul 19, 2018

@xiruiZeng
xiruiZeng
on Jul 19, 2018

@lasselaakkonen 我加了这个targetElement.focus();还是没解决到，还是快速点击input不能弹出键盘

wilmersondasilva
mentioned this on Aug 2, 2018
lilong7676

lilong7676 commented on Apr 8, 2019

@lilong7676
lilong7676
on Apr 8, 2019

@tabtang
image

add targetElement.focus();
i use this method solve this problem

iOS11.3 + 都有这个问题，这种方式的确解决了，那是不是说明iOS11.3版本以后就不需要fastClick了？

Young5416

Young5416 commented on May 16, 2019

@Young5416
Young5416
on May 16, 2019

@yylgit 加上了textarea还是没效果

Young5416

Young5416 commented on May 16, 2019

@Young5416
Young5416
on May 16, 2019

@yylgit ios系统12.2

Young5416

Young5416 commented on May 16, 2019

@Young5416
Young5416
on May 16, 2019

@yylgit 解决了,是缓存原因

jungor

jungor commented on Nov 25, 2019

@jungor
jungor
on Nov 25, 2019

为啥npm不发新版

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @geraldlrh@maxcong@slinhuang@jzlingmo@vahvarh

        Issue actions
          can not bring up keyboard instantly in ios 11.3 · Issue #548 · ftlabs/fastclick