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 ...
随机推荐
- CCFLOW5 SDK 模式 开发环境配置
在群里和论坛里问了N次都没有人回答,最终在QQ好友[冥(276669806) ]的帮助下成功配置了SDK开发环境.现将具体配置步骤分享给大家.1.打开VS2010 新建一个网站项目2.将CCFlow\ ...
- 智能家居入门DIY——【四、组合】
前面几篇介绍了一些传感器和代码,这篇介绍一下把它们组合起来.之所以单独列出这部分,原因在于组合更多功能的时候发现使用软串口库驱动ESP8266时由于内存过小导致发送失败甚至整个系统无法工作的情况.所以 ...
- HDU 2846 Repository（字典树，每个子串建树，*s的使用）
Repository Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- Vue 获取数据、事件对象、todolist
vue中在方法里获取data里的msg:this.msg 在微信小程序里this.data.msg 改变data里的msg:this.msg="改变后的msg" 可以通过list. ...
- EasyUI汇总
easyui combobox添加清除选项按钮 <input class="easyui-combobox" name="appType" data-op ...
- red ant
Red Ant(红蚁)网络运维管理系统是IT运维管理系统,提供智能的B/S接口可视化人机界面,通过简单的操作实现全方位的网络专线.服务器.中间件.各种应 用程序.机房动力环境等监控管理,“化繁为简”, ...
- MPI 打包与解包函数 MPI_Pack()，MPI_Unpack()
▶ MPI 中与数据打包传输有关的几个函数 ● 函数 MPI_Pack() 与 MPI_Unpack() 的原型 MPI_METHOD MPI_Pack( _In_opt_ const void* i ...
- Git----远程仓库01
到目前为止,我们已经掌握了如何在Git仓库里对一个文件进行时光穿梭,你再也不用担心文件备份或者丢失的问题了 可是用过集中式版本控制系统SVN的童鞋们会站出来说,这些功能在SVN里早就有了,没看出Git ...
- UNITY插件信息收集
2018.8.7 UNITY超级优化神器 : Amplify Impostors
- 【转】TCP、UDP数据包大小的限制
来自:https://blog.csdn.net/caoshangpa/article/details/51530685 1.概述 首先要看TCP/IP协议,涉及到四层:链路层,网络层,传输层,应用层 ...