解决问题: 多个input框连续输入iOS键盘隐藏问题
在ios由于focus事件默认被禁止,对于密码或验证码输入框,如果使用多个input框,每输入以为都会使键盘隐藏,输入下一位需要重新点击 input 框调出键盘,造成很不好的体验
以下的方式仅提供的是四位短信验证码的解决方案,密码输入解决方案类似,可在其基础上改造;解决方式是使用一个input框,在其上放置四个span,使输入的值显示在span中,使人感觉有四个输入框,不好的点就是没有光标,有兴趣的同学可以添加;
使用过程中有其他问题或有其他更好的解决方案,欢迎指教!!!
- html
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script>
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 375) + "px"
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);
recalc()
})(document, window);