美文网首页
div模拟键盘

div模拟键盘

作者: Gavin113 | 来源:发表于2017-12-02 10:15 被阅读0次

    输入编号

    123456789

    关闭回删

    //点击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[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

    {

    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);

    相关文章

      网友评论

          本文标题:div模拟键盘

          本文链接:https://www.haomeiwen.com/subject/mfxnbxtx.html