DIV 模拟数字键盘输入，实现禁用软键盘及光标闪动跟随

需求是这样的：需要实现一个虚拟键盘，仅包含数字和大写的字母（实现参考：https://www.love85g.com/?p=1777），然后就是直接在input上加属性readonly。

demo:
https://www.sjooy.com/keyboard/

猛一看挺好的，其实隐藏了两个问题：

1：readonly在ios的一些机型上会出现兼容问题，下边会出现自带键盘的横条；2：光标没了，让用户感知不到我现在输入定位在哪里。

然后就是想我不用 readonly ，但是可以禁止默认键盘弹出，保留光标

1： document.activeElement.blur();

2：return false

上边的方法好像作用不太大，然后再群里请教大佬，用div去模拟实现input的效果，其实模拟input很好实现，最主要的难点在于光标的闪动及跟随。

核心代码：

光标的闪动

.cursor-blink{  
    animation: blink 1s infinite steps(1, start);   
    -webkit-animation:blink 1s infinite steps(1, start);   
    -moz-animation:blink 1s infinite steps(1, start);   
    width:1px; 
    height:20px;  
    display: inline-block;  
    position: relative;
    top:5px;  
    left:-70px; 
    display: none;  
}  
@keyframes blink {  
    0%, 100% {  
        background-color: #000;  
        color: #aaa;  
    }  
    50% {  
        background-color: #bbb; /* not #aaa because it's seem there is Google Chrome bug */  
        color: #000;  
        }  
}  

跟随

用样式来控制光标的位置，默认在最前边（left:-70px;），然后输入的时候left设置为0（document.querySelector(“.cursor-blink”).style.left=”0px”; ）

参考： http://ask.dcloud.net.cn/article/12798

欢迎关注小程序，感谢您的支持！