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 ...
随机推荐
- hadoop之 hadoop 机架感知
1.背景 Hadoop在设计时考虑到数据的安全与高效,数据文件默认在HDFS上存放三份,存储策略为本地一份,同机架内其它某一节点上一份,不同机架的某一节点上一份.这样如果本地数据损坏,节点可以从同一机 ...
- 世界级的开源项目：TiDB 如何重新定义下一代关系型数据库
著名的开源分布式缓存服务 Codis 的作者,PingCAP 联合创始人& CTO ,资深 infrastructure 工程师的黄东旭,擅长分布式存储系统的设计与实现,开源狂热分子的技术大神 ...
- git Permissions 0777 for '/home/xxx/.ssh/id_rsa' are too open.
使用 git 时出现下面的问题,原因是 git 公钥的权限被修改了. @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WAR ...
- 常用的acl规则
一.常用的acl规则 haproxy的ACL用于实现基于请求报文的首部.响应报文的内容或其它的环境状态信息来做出转发决策,这大大增强了其配置弹性.其配置法则通常分为两步,首先去定义ACL ...
- 把MacBook里的电影导入到iPad
主要是用iTunes -> 文件 -> 添加到资料库,然后选择影片 -> 同步 -> 应用.在iPad上点开视频APP即可. 怎样才能把mac里的电影放到ipad里_百度知道 ...
- 1021 docker prometheus监控体系
jmeter plugin监控的信息很少,只有cpu.内存.网络IO,但这些是不够的.例如对于分析mysql数据库的慢查询.最大连接数等更加细密度的信息. 服务端稳定测试的三个前提: 1.应用级别的自 ...
- httpclient的几种请求URL的方式
一.httpclient项目有两种使用方式.一种是commons项目,这一个就只更新到3.1版本了.现在挪到了HttpComponents子项目下了,这里重点讲解HttpComponents下面的ht ...
- JS截取字符串常用方法详细整理&&MYSQL
截取字符串的使用比较广泛,有很多中方法,本文粗略的整理了一些,感兴趣的额朋友可以才参考下 使用 substring()或者slice() 函数:split() 功能:使用一个指定的分隔符把一个字符串分 ...
- 群里一个高手写的url?传参执行php函数的小程序, 收藏下
<?php // +---------------------------------------------------------------------- // | Copyright ( ...
- ul li的添加 删除 复制 clone（）
语法总结 li＝document．createElement('li') li.innerText = tag $('#i1').append(li) $(..).clone() 复制整个文本和Ht ...