div模拟键盘输入

Posted 2020-10-16 Gavin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div模拟键盘输入相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
        <meta name="HandheldFriendly" content="true"/>
        <meta name="MobileOptimized" content="320"/>
    <title></title>
        <style>   
        *{ margin: 0px; padding: 0;}
        .txt{ position: relative; padding-left: 10px; padding-right: 10px;}
        .input{  
            width:97%;  
            height:34px;  
            line-height:34px;  
            font-size:14px;  
            border:1px solid #ddd;
            padding-left: 10px; 
        }  
        .setNumber{display: inline-block; position: relative;top:0px;font-size: 16px;}
        .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;
            }
        }

    .footer{position: fixed; bottom:0px;  padding:10px; padding-bottom: 10px; background-color:#999999; display: none;}
    .footer .number b,.footer .del_close b{ width:80px; height:50px; display: inline-block; background-color: white; border:1px solid #ddd; text-align: center; line-height:40px; margin-bottom: 10px;  }
    .footer .number{ width:80%; float: left;}
    .footer .del_close b{width:65px; width:18%;}
        </style>
    </head>
    <body style=" padding:0px; padding-top: 50px; ">

    <div class="txt">

    <div class="input" ><span class="setNumber">输入编号</span> <span class="cursor-blink"><span></div>  

    </div>
    <div class="footer">
    <div class="number">
    <b>1</b>
    <b>2</b> 
    <b>3</b>
    <b>4</b>
    <b>5</b> 
    <b>6</b> 
    <b>7</b>
    <b>8</b>
    <b>9</b>
    </div>    
    <div class="del_close">
    <b id="close">关闭</b>
    <b id="del">回删</b>
    </div>
    </div>

    <script>

            //点击DIV输入框
        var input_txt=document.querySelector(".input");
            input_txt.addEventListener(‘click‘,function()
            {
                document.querySelector(".cursor-blink").style.display="inline-block";
                document.querySelector(".footer").style.display="block";
            },false);

            //给每个数字，添加点击事件
         var b_num=document.querySelectorAll(".number>b"); 
         var setNumber=document.querySelector(".setNumber");

             for(var i=0;i<b_num.length;i++)
             {
                b_num[i].addEventListener(‘click‘,function()
                {
                    var num=this.innerText;
                    document.querySelector(".cursor-blink").style.left="0px";
                    var txt=setNumber.innerHTML; //获得DIV文本
                        if(isNaN(txt))
                        {
                        setNumber.innerHTML=""; //删掉输入编号文字
                                        txt=""; //
                        }
                       setNumber.innerHTML=txt+""+num; 

                },false);   
             }
            ///


            //回删数字
        var del=document.querySelector("#del");
            del.addEventListener(‘click‘,function()
            {
                 var setNumber=document.querySelector(".setNumber");
                 var txtnum=setNumber.innerText;
                     if(isNaN(txtnum))
                     {
                        return;
                     }
                 var news_num="";
                     for(var i=0;i<txtnum.length-1;i++)
                     {
                     news_num+=""+txtnum[i];  
                     }
                     setNumber.innerText=news_num;
                     if(news_num=="")
                     {
                        setNumber.innerText="输入编号";
                        document.querySelector(".cursor-blink").style.left="-70px";
                     }
            },false);   


         //关闭数字键盘
        var close=document.querySelector("#close");
            close.addEventListener(‘click‘,function()
            {
                 document.querySelector(".cursor-blink").style.display="none";
                 document.querySelector(".footer").style.display="none";

            },false);   
    </script>

    </body>
</html>

以上是关于div模拟键盘输入的主要内容，如果未能解决你的问题，请参考以下文章

51单片机模拟数字键盘输入以及图像显示+Proteus仿真

java+selenium3模拟键盘操作