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

本文实例讲述了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程序设计有所帮助。