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

作者: MJ 分类: javascript 发布时间: 2019-06-06 09:01

需求是这样的:需要实现一个虚拟键盘,仅包含数字和大写的字母(实现参考: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

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注