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 ...
随机推荐
- CCNode的属性说明
class CC_DLL CCNode : public CCObject { protected://属性列表 float m_fRotationX; ///x轴旋转角度 float m_fRota ...
- web应用中的Filter过滤器之基础概述
1 过滤器概述 当web容器接收到对一个资源的请求时,它将判断是否有过滤器与这个资源相关联,如果有,那么容器将把这个请求交给过滤器进行处理.在过滤器中,你可以改变请求的内容或者重新设置请求的报头信息, ...
- string，char*及CString类型的相互转换
首先先介绍一下什么是CString CString是MFC的字符串类,它不是基本类型,而是对字符串的封装,它是自适应的,在UNICODE环境下就是CStringW,在非UNICODE环境下就是CStr ...
- 使用JS 加入收藏,设为首页.
<script type="text/javascript" language="javascript"> function AddFavorite ...
- 图搜索——使用DFS和BFS耗时比较
图测试数据生成代码: #include<bits/stdc++.h> using namespace std; int random(int mod) { return rand() % ...
- pythonNet day03
TCP应用之 httpserver 1.接收http请求 2.查看http请求 3.返回一个网页给客户端 # 做的是一个本地服务端,接收来自浏览器客户端的请求 from socket import * ...
- cesium初始化参数
var viewer = new Cesium.Viewer('cesiumContainer',{ animation:false, //动画控制不显示 //baseLayerPicker:fals ...
- 记录在Python2.7 x64 bit 下 PyQt5.8的编译过程
由于工作需要使用python下面的Qt库.PyQt现在只提供针对Python3.X系列的PyQt,所有需要自己手动编译.防止忘记,特意写下随笔记录备忘. 工 作 环境:Python版本:Python ...
- leetcode922
public class Solution { public int[] SortArrayByParityII(int[] A) { var len = A.Length; ];//奇数1,3,5, ...
- Memo synEditor 当前行号
Memo 当前行号,坐标,位置 可以使用Memo的属性CaretPos.X来取行鼠标所在行的行数与鼠标所在行的第几位 Memo.CaretPos.X 光标或鼠标所在行的列号(第几位),从0开始计数Me ...