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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
javascript中万恶的function实例分析
May 25 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
javascript实现点击小图显示大图
Nov 29 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
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之第十天
2006/10/09 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
php调用shell的方法
2014/11/05 PHP
JavaScript中九种常用排序算法
2014/09/02 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
简历自我评价怎么写呢?
2014/01/06 职场文书
关于工资低的辞职信
2014/01/14 职场文书
企业消防安全制度
2014/02/02 职场文书
12月红领巾广播稿
2014/02/13 职场文书
优秀广告词大全
2014/03/19 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
2015年推普周活动方案
2015/05/06 职场文书
解除处分决定书
2015/06/25 职场文书
聘任书的格式及模板
2019/10/28 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
Python学习之异常中的finally使用详解
2022/03/16 Python