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

Posted 2020-08-09 海狸先森

  最近要做一个移动前端, 填字的需求, 类似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端实现以后运行完美。 然后就是悲剧的开始。

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

 

---

 

1.  微信浏览器中, 在九宫格键盘输入时, keydown, keyup事件中无法获取到keyCode, which(全部是0)。可以换在input事件中进行input value的重置, 不过这样字符会闪动, 回调是在输入生效以后才发生的, 会看到字符闪动的现象。

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

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

 

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