<!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模拟键盘输入的更多相关文章

  1. 使用C#模拟键盘输入、鼠标移动和点击、设置光标位置及控制应用程序的显示

    1.模拟键盘输入(SendKeys) 功能:将一个或多个按键消息发送到活动窗口,就如同在键盘上进行输入一样. 语法:SendKeys.Send(string keys);SendKeys.SendWa ...

  2. SendInput模拟键盘输入的问题

    SendInput模拟键盘输入的问题  http://www.cnblogs.com/yedaoq/archive/2010/12/30/1922305.html 最近接触到这个函数,因此了解了一下, ...

  3. VB模拟键盘输入的N种方法

    VB模拟键盘输入的N种方法http://bbs.csdn.net/topics/90509805hd378发表于: 2006-12-24 14:35:39用VB模拟键盘事件的N种方法 键盘是我们使用计 ...

  4. Python模拟键盘输入和鼠标操作

    Python模拟键盘输入和鼠标操作 一.Python键盘输入模拟: import win32api import win32con win32api.keybd_event(17,0,0,0)  #c ...

  5. 模拟键盘输入 : SendMessage, keybd_event, PostKeybdMessage

    转自模拟键盘输入 : SendMessage, keybd_event, PostKeybdMessage 目的 最近项目要求在Windows CE下模拟键盘输入,上网搜索了一下,发现有3个API可以 ...

  6. 模拟键盘输入首先要用到一个API函数：keybd_event

    转自:http://www.cnblogs.com/cpcpc/archive/2011/02/22/2123055.html 模拟键盘输入首先要用到一个API函数:keybd_event. 模拟按键 ...

  7. 微信小程序车牌号码模拟键盘输入

    微信小程序车牌号码模拟键盘输入练习, 未经允许,禁止转载,抄袭,如需借鉴参考等,请附上该文章连接. 相关资料参考:https://blog.csdn.net/littlerboss/article/d ...

  8. 用Delphi模拟键盘输入

    在Windows大行其道的今天,windows界面程序受到广大用户的欢迎.对这些程序的操作不外乎两种,键盘输入控制和鼠标输入控制.有时,对于繁杂的,或重复性的操作,我们能否通过编制程序来代替手工输入, ...

  9. 【转】C# winform 加载网页 模拟键盘输入自动接入访问网络

    [转]C# winform 加载网页 模拟键盘输入自动接入访问网络 声明: 本文原创,首发于博客园 http://www.cnblogs.com/EasyInvoice/p/6070563.html  ...

随机推荐

  1. ①Jenkins集成—入门安装使用

    一.什么是Jenkins jenkins是一个广泛用于持续构建的可视化web工具,持续构建说得更直白点,就是各种项目的"自动化"编译.打包.分发部署.jenkins可以很好的支持各 ...

  2. VirtualBox的vdi映像导入遇到的uuid冲突问题 (转)

      virtualbox导入vdi文件时出现下面的问题: 打开hard disk D:\software\GT5.0.0.vdi 失败 Cannot register the hard disk 'D ...

  3. erp中三大订单CO、PO、MO

    ERP即 企业资源计划 (Enterprise Resource Planning),由美国 Gartner Group 公司于1990年提出. ERP系统是指建立在信息技术基础上,以系统化的管理思想 ...

  4. RK3288 device descriptor read/64, error -32

    CPU:RK3288 系统:Android 5.1 主板有两个USB接口,一个接USB摄像头,一个接身份证模块. 插入摄像头可以正常打开,再插入身份证模块时,摄像头就会卡主,而且身份证模块无法识别,内 ...

  5. emacs之配置auto-complete

    el-get-install安装auto-complete emacsConfig/auto-complete-setting.el ;这个是设置一个字母就自动完成的 (setq ac-auto-st ...

  6. charles手机抓包配置-1

    1.下载和安装Charles 下载和安装Charles软件.安装前要先安装Java运行环境,因为Charles是Java写的. 自己百度云上有破解版 2.安装电脑的Charles证书,对证书进行信任设 ...

  7. 【精华】部署与管理ZooKeeper(转)

    部署与管理ZooKeeper(转) 本文以ZooKeeper3.4.3版本的官方指南为基础:http://zookeeper.apache.org/doc/r3.4.3/zookeeperAdmin. ...

  8. Spring MVC的困惑url-pattern /和/*的区别

    今天在写项目时发现一个spring 总是报org.springframework.web.servlet.DispatcherServlet noHandlerFound警告: No mapping ...

  9. 【POJ】1935 Journey（树形dp）

    题目 传送门:QWQ 分析 凉凉. 答案是所有要经过的点到根所经过的边权和减去最大的边权. 代码 vector好慢啊 #include <cstdio> #include <vect ...

  10. ZOJ - 3657-The Little Girl who Picks Mushrooms

    /*ZOJ Problem Set - 3657 The Little Girl who Picks Mushrooms Time Limit: 2 Seconds Memory Limit: 327 ...