移动端input开发问题

作为前端开发，工作中不可避免的要接触input，要基于input做一些定制化开发，但因为安卓ios系统的差异性，宿主app的webview选择（特指ios），app的历史遗留问题等等，会出现大量的兼容性问题

下面，对我开发过程中遇到的问题以及解决方案进行记录，希望能帮到你们

1. ios webview类型

ios下不同的app内置的webview可能不同，导致input行为不一致，所以我们先大致了解一下，目前ios系统下有两种webview：WK和UI

ios8之前，一直使用的是UI，但是从ios8开始，新增了WK类型，相比UI，WK加载速度更快，消耗内存更少，并且支持更多h5的特性，所以各大公司基本都会对此进行升级，但不排除有些app因为各种历史原因还在使用UI，比如我们，目前我们的h5页面运行在多个app内，有UI也有WK，自然在开发的时候做一些兼容判断

判断webview类型

// 暂没发现好的方法来判断webview的类型，除非ios开发告诉你
// 下面这个方式是通过某些只有wk支持的h5新特性来判断
function getIosWebviewType() {
   
    if (navigator.platform.substr(0, 2) === 'iP') {
   
        // iOS (iPhone, iPod or iPad)
        const lte9 = /constructor/i.test(window.HTMLElement);
        const nav = window.navigator; const ua = nav.userAgent;
        const idb = !!window.indexedDB;
        if (ua.indexOf('Safari') !== -1 && ua.indexOf('Version') !== -1 && !nav.standalone) {
   
            return 'Safari'
        } else if ((!idb && lte9) || !window.statusbar.visible) {
   
            return 'UI'
        } else if ((window.webkit && window.webkit.messageHandlers) || !lte9 || idb) {
   
            return 'WK'
        }
    }
    return 'unknown'
}

2. autofocus失效

不管是h5规范还是在caniuse上面查，这个属性都是支持的，但你在真机上面测试的时候，很多情况下，并不是你想要的效果

目前我测试情况如下：

• ios
  • UIWebview，可以聚焦，有光标，能呼起键盘
  • WKWebview，可以聚焦，有光标，但呼不起键盘
• 安卓
  • 暂时没发现问题（但不绝对）

网上了解到的原因是，苹果希望由用户来触发，输入这个操作是用户的意愿，而不是强制的，所以在新版本系统中禁止了这个属性，老版本的UI上面还没有这个限制

但庆幸的是，不管是安卓还是ios，都支持在touch或者click事件中同步的执行input.focus