时间:2021-05-26
本文实例讲述了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程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
实现了一个自定义的密码输入框和自定义数字键盘,用作用户支付密码设置界面。先上效果图如下,方格样式,以及点击空白处隐藏软键盘。控件实现清单:1)集成于EditTe
支持查询功能的键盘和简单得软键盘,键盘样式完全在独立的css文件中定义,可以自行美化。(支持从查询的软键盘)(简单的软件盘)插件的默认参数复制代码代码如下:jq
JS代码实现自定义热键实现功能:1.自定义上下左右键2.使用自定义热键或者使用键盘上下左右键移动图片效果图:步骤1:HTML代码:使用自定义按键实现图片移动ta
键盘大家都知道,那么什么是软键盘呢?软键盘就是电脑上所带有的一种键盘,在你的键盘不能使用的时候,可以用软键盘取代,因为操作软键盘的是鼠标。使用软键盘可以有效
问题:今天公司项目处理一个软键盘弹出的逻辑,要求点击按钮之后弹出软键盘。实现代码如下://获取焦点editText.setFocusable(true);edi