JS实现自定义简单网页软键盘效果代码


Posted in Javascript onNovember 05, 2015

本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考,具体如下:

这是一款自定义的简单点的网页软键盘,没有使用任何控件,仅是为了练习JavaScript编写水平,安全性方面没有过多考虑,有顾虑的可以不用,目的是学习,希望对您有用处。

运行效果截图如下:

JS实现自定义简单网页软键盘效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>自写一个简单点的网页软键盘</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
* {
 padding:0;
 margin:0;
}
body {
 background:#fff;
}
th, td {
 border:1px solid #ccc;
 padding:2px 0;
 text-align:center;
}
td {
 cursor:pointer
}
div {
 border:1px solid #999;
 float:left;
 padding:1px;
 display:none;
}
.num {
 color:blue;
}
</style>
<script>
var htmlCode = {
 "&" : "&",
 '"' : "\"",
 "<" : "<",
 ">" : ">",
}
function test(){
 var input = document.getElementById("input");
 var e = window.event || test.caller.arguments[0];
 var el = e.target || e.srcElement;
 if(el.tagName.toLowerCase() == "td" && el.rowSpan <= 1 && el.colSpan <= 1 ){
  var str = el.innerHTML;
  str = htmlCode[str] || str;
  input.value += str;
 }
 if(el.innerHTML == "退格"){
  input.value = input.value.slice(0,-1); 
 }
 if(el.innerHTML == "切换大/小写"){
  var els = document.getElementsByTagName("td");
  for(var i = 0, l = els.length; i < l; i++){
   var str = els[i].innerHTML;
   if(/^[a-z]$/.test(str))
    els[i].innerHTML = str.toUpperCase();
   if(/^[A-Z]$/.test(str))
    els[i].innerHTML = str.toLowerCase(); 
  }
 }
 if(el.innerHTML == "ENTER"){
  ctrKeyboard();
 }
}
function ctrKeyboard(){
 var el = document.getElementById("keyboard");
 if(el.offsetWidth > 0)
  el.style.display = "none";
 else {
  el.style.display = "block";
  sortNum(); 
  capsInit();
 }
}
function capsInit(){
 var els = document.getElementsByTagName("td");
 for(var i = 0,j = 0, l = els.length; i < l; i++){
  var str = els[i].innerHTML;
  if(/^[A-Z]$/.test(str))
   els[i].innerHTML = str.toLowerCase(); 
 }
}
function sortNum (){
 var arr = [0,1,2,3,4,5,6,7,8,9].sort(function(){
  return Math.random() > 0.5?1:-1;
 });
 var els = document.getElementsByTagName("td");
 for(var i = 0,j = 0, l = els.length; i < l; i++){
  var str = els[i].innerHTML;
  if(/^\d$/.test(str))
   els[i].innerHTML = arr[j++];
 } 
}
</script>
</head>
<body>
<input id="input" readonly="readonly"/><input type="button" value="打开/关闭 键盘" onclick="ctrKeyboard()"/>
<br>
<br>
<div id="keyboard">
 <table cellspacing="1" width="480" onclick="test()">
 <tr>
  <th colspan="16">键盘模拟输入密码器</th>
 </tr>
 <tr>
  <td>~</td>
  <td>!</td>
  <td>@</td>
  <td>#</td>
  <td>$</td>
  <td>%</td>
  <td>^</td>
  <td>&</td>
  <td>*</td>
  <td>(</td>
  <td>)</td>
  <td>_</td>
  <td>+</td>
  <td>|</td>
  <td rowspan="2" width="120">退格</td>
 </tr>
 <tr>
  <td>`</td>
  <td class="num">1</td>
  <td class="num">2</td>
  <td class="num">3</td>
  <td class="num">4</td>
  <td class="num">5</td>
  <td class="num">6</td>
  <td class="num">7</td>
  <td class="num">8</td>
  <td class="num">9</td>
  <td class="num">0</td>
  <td>-</td>
  <td>=</td>
  <td>\</td>
 </tr>
 <tr>
  <td>q</td>
  <td>w</td>
  <td>e</td>
  <td>r</td>
  <td>t</td>
  <td>y</td>
  <td>u</td>
  <td>i</td>
  <td>o</td>
  <td>p</td>
  <td>{</td>
  <td>}</td>
  <td>[</td>
  <td>]</td>
  <td colspan="2">切换大/小写</td>
 </tr>
 <tr>
  <td>a</td>
  <td>s</td>
  <td>d</td>
  <td>f</td>
  <td>g</td>
  <td>h</td>
  <td>j</td>
  <td>k</td>
  <td>l</td>
  <td>:</td>
  <td>"</td>
  <td>;</td>
  <td>'</td>
  <td colspan="3" rowspan="3">ENTER</td>
 </tr>
 <tr>
  <td>z</td>
  <td>x</td>
  <td>c</td>
  <td>v</td>
  <td>b</td>
  <td>n</td>
  <td>m</td>
  <td><</td>
  <td>></td>
  <td>?</td>
  <td>,</td>
  <td>.</td>
  <td>/</td>
 </tr>
 </table>
</div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js的touch事件的实际引用
Oct 13 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
JavaScript 绘制饼图的示例
Feb 19 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 #Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 #Javascript
如何防止JavaScript自动插入分号
Nov 05 #Javascript
javascript常用函数(2)
Nov 05 #Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 #Javascript
javascript常用函数(1)
Nov 04 #Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 #Javascript
You might like
获得Google PR值的PHP代码
2007/01/28 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python监控进程脚本
2018/04/12 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
市场安全管理制度
2014/01/26 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
安全生产管理责任书
2014/04/16 职场文书
给校长的建议书600字
2014/05/15 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
幼儿园教师求职信
2015/03/20 职场文书
结婚堵门保证书
2015/05/08 职场文书
创业计划书之美甲店
2019/09/20 职场文书