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
欢迎关注小程序,感谢您的支持!