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 相关文章推荐
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
jquery插件 cluetip 关键词注释
Jan 12 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 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
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
Postman模拟发送带token的请求方法
2018/03/31 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
10款最好的Web开发的 Python 框架
2015/03/18 Python
给Python初学者的一些编程技巧
2015/04/03 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
python获取多线程及子线程的返回值
2017/11/15 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
Java使用Unsafe类的示例详解
2021/09/25 Java/Android