输入框自动聚焦——总结计划（一） #30

damoclesX · 2016-09-09T08:14:25Z

前言

忙了几个月，期间至少在3个项目中穿梭，已然成狗，终于有时间来总结下了。在项目中遇到了很多的问题，但是过了这么久的时间，有些都忘了差不多了，就只有想到什么写什么了。

需求

项目中有这种需求，点击某按钮，显示之前隐藏的界面，界面某输入框自动聚焦，移动端键盘自动弹出。
因为是hybrid app应用，网页在android和ios中通用，就涉及兼容性。

初始想法

开始也没想直接开始：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Document</title>
</head>
<body>
    <button>显示隐藏mask</button>
    <div id="mask" style="display:none">
        <input type="text" id="input" autofocus>
    </div>
    <script>
        var btn = document.getElementsByTagName('button')[0];
        var input = document.getElementById('input');
        var mask = document.getElementById('mask');

        btn.onclick = function() {
            mask.style.display = 'block';
        };
    </script>
</body>
</html>

查阅autofocus兼容性表: http://caniuse.com/#search=autofocus
虽然ios safari不支持
但是：

While not supported in iOS Safari, it does work in iOS WebViews.

在ios webview是支持这个的。所以直接这样写了。android中工作的很好，但是在webview中仍然不可以，开始怀疑canius数据是否准确，然后继续尝试其他方法。

 btn.onclick = function() {
     mask.style.display = 'block';
     input.focus();
 };

这时可以在ios safari自动聚焦了，但是在ios webview还是不行，这...

webview引用的网页已经经过多次重构（经验不足，起初以为就是一个简单的页面，同公司其他app一样，结果这个app功能越做越复杂，功能也越来越多）。从最开始的全部原生js开搞，经历了zepto重构，vue重构前后三次，这个提醒了我，以后遇到这种，不要把需求想得那么简单，要用做应用的思维来做，不要做网页的思维来做，不然很多路子限死了，后面各种重构。呃呃呃...一不小心偏题了。

最终无奈还是求助于google，在stackoverflow看到类似问题，得知ios app那边对webview的设置有这个东西
keyboardDisplayRequiresUserAction。后面设置这个东西为false（NO）终于可以了。这我就奇怪了，app那边说从来没改过这个，那zepto那个版本时，怎么可以通过trigger('focus')来实现呢？

不说了，去看zepto的源码了

jincdream · 2017-03-23T09:50:25Z

wrap.style.display = 'block';
input.focus()
就能让input聚焦, 弹起键盘了,

damoclesX added html5 js labels Sep 9, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

输入框自动聚焦——总结计划（一） #30

输入框自动聚焦——总结计划（一） #30

damoclesX commented Sep 9, 2016 •

edited

Loading

jincdream commented Mar 23, 2017

输入框自动聚焦——总结计划（一） #30

输入框自动聚焦——总结计划（一） #30

Comments

damoclesX commented Sep 9, 2016 • edited Loading

前言

需求

初始想法

jincdream commented Mar 23, 2017

damoclesX commented Sep 9, 2016 •

edited

Loading