最近网页开发, 遇到的, 微信, iphone 的一些兼容性问题

最近要做一个移动前端, 填字的需求, 类似pc上一些程序填写序列号的界面,

填写前:  h                  w o r l d

填写后:  h e  l  l  o  w o r l d,

界面大概如上图, 在下划线的位置填写对应的序列号, 但是必须保证输入体验的的连续性。

填写字符, 下划线好办, 最开始的思路直接用input来做填写框, css 如下:

.my-input{
        width: 12px;
        margin-right: 1px;
        outline: none;
        border: none;
        border-bottom: 1px solid black;   

        font-size: 10pt;
        font-weight: bolder;

        text-align: center;
        color: #818181;
}

消去input 的浏览器默认样式以后, 利用border来模拟出下划线。然后每个小字符的输入框用一个Input来实现, 多个input来实现出需要的ui样式。

然后利用js, keydown事件, 每当用户输入一个字符, 识别keyCode对当前input中的值进行过滤, 就focus到下一个input当中。PC端实现以后运行完美。 然后就是悲剧的开始。

上到移动端以后出现各种问题。

2.  在iphone的微信中, 不经过用户的点击, 在keydown, keyup中用js, 调用focus让input获取焦点, 会导致无法弹出软键盘, 原本打开的软键盘也会关闭。

这个坑就比较大了, 试过模拟一个click事件发现还是没用, 暂时没找到好的方法。

好消息是PM让不用管微信, PC上能运行OK就可以。