【前端】虚拟键盘的简单运用

因公司业务需求，临时了解了一下前端虚拟键盘的实现，做简单记录

 

测试效果图如下：

 

实现：

前端采用layui

页面代码如下

<input class="layui-input fontinfo" style="display: none;height: 100%;width: 60%" type="number" min="1" id="payfigure" placeholder="请输入充值金额"/>

js文件为：

    $('#payfigure').keyboard({
            layout: 'custom',
            usePreview: false,
            customLayout: {
                'normal' : [
                    '7 8 9',
                    '4 5 6',
                    '1 2 3',
                    '0 {bksp}'
                ]
            },
            autoAccept: true,
        });

//注意此段代码放在layui js中

 

 

<script src="../js/keyboard/vk_loader_.js?vk_layout=US US&vk_skin=flat_gray" ></script>
<script>
        $(document).ready(function(){
            $("#inputm").css("display", "none");

            $(document).bind('click',function(e){
                var e = e || window.event; //浏览器兼容性
                var elem = e.target || e.srcElement;
                while (elem) { //循环判断至跟节点，防止点击的是div的id=‘test’的子元素
                    if (elem.id && (elem.id=='password' || elem.id=='inputm')) {
                        return;
                    }
                    elem = elem.parentNode;
                }
                $("#inputm").css("display", "none");
            });
            $("#password").focus(function(){
                VirtualKeyboard.show('password', 'softkey');
                $("#inputm").css("display", "block");
                $("#kb_langselector,#kb_mappingselector,#copyrights").css("display", "none");
                //改变其为英文输入
                //$("#kb_langselector,#kb_mappingselector,#copyrights").
            });
        });
    </script>



<div  id="inputm" align="center" style="position: fixed;bottom: 0;height:47%;margin:0;width:100%;background-color: #303030;">
    <div id="softkey"></div>
</div>

 

 

资源路径为：https://download.csdn.net/download/jianmingxie/11255665

参考文档：