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

 更新时间:2015年11月8日 20:27  点击:3776

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

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

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-simple-web-keybord-style-codes/

具体代码如下:

<!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程序设计有所帮助。

[!--infotagslink--]

相关文章

  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧,希望文章对各位有帮助。 为了更好的了解redis协议,我们用php来实现...2016-11-25
  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
  • 不打开网页直接查看网站的源代码

      有一种方法,可以不打开网站而直接查看到这个网站的源代码..   这样可以有效地防止误入恶意网站...   在浏览器地址栏输入:   view-source:http://...2016-09-20
  • C#创建自定义控件及添加自定义属性和事件使用实例详解

    这篇文章主要给大家介绍了关于C#创建自定义控件及添加自定义属性和事件使用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用C#具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-25
  • php 调用goolge地图代码

    <?php require('path.inc.php'); header('content-Type: text/html; charset=utf-8'); $borough_id = intval($_GET['id']); if(!$borough_id){ echo ' ...2016-11-25
  • JS+CSS实现分类动态选择及移动功能效果代码

    本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码。分享给大家供大家参考,具体如下:这是一个类似选项卡功能的选择插件,与普通的TAb区别是加入了动画效果,多用于商品类网站,用作商品分类功能,不过其它网站也可以用,...2015-10-21
  • JS基于Mootools实现的个性菜单效果代码

    本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考,具体如下:这里演示基于Mootools做的带动画的垂直型菜单,是一个初学者写的,用来学习Mootools的使用有帮助,下载时请注意要将外部引用的mootools...2015-10-23
  • JS实现自定义简单网页软键盘效果代码

    本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考,具体如下:这是一款自定义的简单点的网页软键盘,没有使用任何控件,仅是为了练习JavaScript编写水平,安全性方面没有过多考虑,有顾虑的可以不用,目的是学...2015-11-08
  • php 取除连续空格与换行代码

    php 取除连续空格与换行代码,这些我们都用到str_replace与正则函数 第一种: $content=str_replace("n","",$content); echo $content; 第二种: $content=preg_replac...2016-11-25
  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考,具体如下:这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一...2015-10-21
  • php简单用户登陆程序代码

    php简单用户登陆程序代码 这些教程很对初学者来讲是很有用的哦,这款就下面这一点点代码了哦。 <center> <p>&nbsp;</p> <p>&nbsp;</p> <form name="form1...2016-11-25
  • PHP实现清除wordpress里恶意代码

    公司一些wordpress网站由于下载的插件存在恶意代码,导致整个服务器所有网站PHP文件都存在恶意代码,就写了个简单的脚本清除。恶意代码示例...2015-10-23
  • android自定义动态设置Button样式【很常用】

    为了增强android应用的用户体验,我们可以在一些Button按钮上自定义动态的设置一些样式,比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20
  • jQuery+slidereveal实现的面板滑动侧边展出效果

    我们借助一款jQuery插件:slidereveal.js,可以使用它控制面板左右侧滑出与隐藏等效果,项目地址:https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15
  • js识别uc浏览器的代码

    其实挺简单的就是if(navigator.userAgent.indexOf('UCBrowser') > -1) {alert("uc浏览器");}else{//不是uc浏览器执行的操作}如果想测试某个浏览器的特征可以通过如下方法获取JS获取浏览器信息 浏览器代码名称:navigator...2015-11-08
  • JS日期加减,日期运算代码

    一、日期减去天数等于第二个日期function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() +...2015-11-08
  • PHP+jQuery翻板抽奖功能实现

    翻板抽奖的实现流程:前端页面提供6个方块,用数字1-6依次表示6个不同的方块,当抽奖者点击6个方块中的某一块时,方块翻转到背面,显示抽奖中奖信息。看似简单的一个操作过程,却包含着WEB技术的很多知识面,所以本文的读者应该熟...2015-10-21
  • PHP开发微信支付的代码分享

    微信支付,即便交了保证金,你还是处理测试阶段,不能正式发布。必须到你通过程序测试提交订单、发货通知等数据到微信的系统中,才能申请发布。然后,因为在微信中是通过JS方式调用API,必须在微信后台设置支付授权目录,而且要到...2014-05-31
  • Android自定义WebView网络视频播放控件例子

    下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子,这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要,以下代码均以Youtube网站在线视...2016-10-02
  • 自定义jquery模态窗口插件无法在顶层窗口显示问题

    自定义一个jquery模态窗口插件,将它集成到现有平台框架中时,它只能在mainFrame窗口中显示,无法在顶层窗口显示. 解决这个问题的办法: 通过以下代码就可能实现在顶层窗口弹窗 复制代码 代码如下: $(window.top.documen...2014-05-31