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 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
javascript 表单验证常见正则
Sep 28 Javascript
javascript中length属性的探索
Jul 31 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
js实现动态时钟
Mar 12 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
Python字符串替换实例分析
2015/05/11 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
python实现按行切分文本文件的方法
2016/04/18 Python
python+mysql实现教务管理系统
2019/02/20 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Python3的socket使用方法详解
2020/02/18 Python
Python socket处理client连接过程解析
2020/03/18 Python
python如何停止递归
2020/09/09 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
银行优秀员工事迹
2014/02/06 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
护理专科学生自荐书
2014/07/05 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
2015年小学开学寄语
2015/02/27 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
python垃圾回收机制原理分析
2022/04/13 Python