最近要做一个移动前端, 填字的需求, 类似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就可以。