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

使用C#模拟键盘输入、鼠标移动和点击、设置光标位置及控制应用程序的显示
1.模拟键盘输入(SendKeys) 功能:将一个或多个按键消息发送到活动窗口,就如同在键盘上进行输入一样. 语法:SendKeys.Send(string keys);SendKeys.SendWa ...
SendInput模拟键盘输入的问题
SendInput模拟键盘输入的问题 http://www.cnblogs.com/yedaoq/archive/2010/12/30/1922305.html 最近接触到这个函数,因此了解了一下, ...
VB模拟键盘输入的N种方法
VB模拟键盘输入的N种方法http://bbs.csdn.net/topics/90509805hd378发表于: 2006-12-24 14:35:39用VB模拟键盘事件的N种方法键盘是我们使用计 ...
Python模拟键盘输入和鼠标操作
Python模拟键盘输入和鼠标操作一.Python键盘输入模拟: import win32api import win32con win32api.keybd_event(17,0,0,0) #c ...
模拟键盘输入 : SendMessage, keybd_event, PostKeybdMessage
转自模拟键盘输入 : SendMessage, keybd_event, PostKeybdMessage 目的最近项目要求在Windows CE下模拟键盘输入,上网搜索了一下,发现有3个API可以 ...
模拟键盘输入首先要用到一个API函数：keybd_event
转自:http://www.cnblogs.com/cpcpc/archive/2011/02/22/2123055.html 模拟键盘输入首先要用到一个API函数:keybd_event. 模拟按键 ...
微信小程序车牌号码模拟键盘输入
微信小程序车牌号码模拟键盘输入练习, 未经允许,禁止转载,抄袭,如需借鉴参考等,请附上该文章连接. 相关资料参考:https://blog.csdn.net/littlerboss/article/d ...
用Delphi模拟键盘输入
在Windows大行其道的今天,windows界面程序受到广大用户的欢迎.对这些程序的操作不外乎两种,键盘输入控制和鼠标输入控制.有时,对于繁杂的,或重复性的操作,我们能否通过编制程序来代替手工输入, ...
【转】C# winform 加载网页模拟键盘输入自动接入访问网络
[转]C# winform 加载网页模拟键盘输入自动接入访问网络声明: 本文原创,首发于博客园 http://www.cnblogs.com/EasyInvoice/p/6070563.html ...

随机推荐

[CLPR] 卷积神经网络的结构
本文翻译自: http://www.codeproject.com/Articles/16650/Neural-Network-for-Recognition-of-Handwritten-Digi ...
桶排序与快速排序算法结合-python实现
#-*- coding: UTF-8 -*- import numpy as np from QuickSort import QuickSort def BucketSort(a, n): barr ...
基数排序算法-python实现
#-*- coding: UTF-8 -*- import numpy as np def RadixSort(a): i = 0 #初始为个位排序 n = 1 #最小的位数置为1(包含0) max ...
Python笔试题&面试题总结
黑色加粗的是笔试题,蓝色是面试题 1.什么是GIL 2.Python中的@staticmethod和@classmethod的区别 (**) 3.Python里面如何拷贝一个对象,并解析深浅拷贝 4. ...
C语言:宽字符集操作函数（unicode编码）
C语言:宽字符集操作函数(unicode编码) 字符分类: 宽字符函数普通C函数描述 iswalnum() isalnum() 测试字符是否为数字或字母 iswalpha() isalpha() 测 ...
给VS类文件添加默认头注释
找到类文件所在路径:C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\ItemTemplatesCache\CSharp\ ...
Hive的基本介绍
Hive最初是应Facebook每天产生的海量新兴社会网络数据进行管理和机器学习的需求而产生和发展的.那么,到底什么是Hive,我们先看看Hive官网Wiki是如何介绍Hive的(https://cw ...
java DecimalFormat类
今天去面试了,需要上机做题.题目的内容是计算一个货物订单的税费和总价格(包括税费),结果需要精确到两个小数,同时按照如下规则进行处理: 3.01 ——>3.05, 2.48——> ...
[失败]SystemTap和火焰图（Flame Graph）
本文参考http://blog.51cto.com/xuclv/1184517 SystemTap简介: SystemTap provides free software (GPL) infrastr ...
基于C++11实现的线程池
1.C++11中引入了lambada表达式,很好的支持异步编程 2.C++11中引入了std::thread,可以很方便的构建线程,更方便的可移植特性 3.C++11中引入了std::mutex,可以 ...

div模拟键盘输入

div模拟键盘输入的更多相关文章

随机推荐

热门专题