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

本文实例讲述了射流研究…实现自定义简单网页软键盘效果。分享给大家供大家参考，具体如下：

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

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-simple-web-key bord-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题自写一个简单点的网页软键盘/title meta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/style * { padd :0；margin :0 } body { background : # fff } th，TD { border :1 px solid # cccpadd :2 px 0；文本对齐：居中；} TD {光标：指针} div {边框：1 px实线# 999；float : leftadding :1 pxdisplay : none }。num { color : blue }/style script var HTMl COde={“^ :”、“^ :”\”、“^ :”、“^ :”、} function test(){ var input=document。getelementbyid(' input ')；var e=窗口。事件| |测试。打电话的人。参数[0]；var El=e . target | | e . srcelementif(El。标记名。tolowercase()==' TD ' El。行跨度=1个El。colspan=1){ var str=El。innerhtmlstr=HTMl COde[str]| | str；input . value=str } if(El . innerHTMl=='退格){输入。值=输入。价值。切片(0，-1)；} if(el.innerHTML=='切换大/小写){ var els=document。getelementsbytagname(' TD ')；for(var i=0，l=els.lengthI li ){ var str=els[i].innerHTMLif(/^[a-z]$/.测试els[i].innerHTML=str。touppercase()；if(/^[A-Z]$/.测试els[i].innerHTML=str。tolowercase()；} } if(El。innerHTMl==' ENTER '){ ctrl键盘()；} }函数ctrl键盘(){ var El=document。getelementbyid('键盘')；if(El。偏移为0)El。风格。显示='无'；else { El。风格。display=' blocksortNum()；辣椒碱();} }函数衣壳尼特(){ var els=document。getelementsbytagname(' TD ')；for(var i=0，j=0，l=els.lengthI li ){ var str=els[i].innerHTMLif(/^[A-Z]$/.测试els[i].innerHTML=str。tolowercase()；} }函数sortNum (){ var arr=[0，1，2，3，4，5，6，7，8，9].sort(function(){ return math。随机()0.5？1:-1;});var els=文档。getelementsbytagname(' TD ')；for(var i=0，j=0，l=els.lengthI li ){ var str=els[i].innerHTMLif(/^\d$/.测试els[i].innerHTML=arr[j]；} }/script/head dyinput id=' input ' readonly=' readonly '/input type=' button ' value='打开/关闭键盘onclick=' ctrl keyboard()'/brbr div id=' keyboard '表格单元格间距=' 1 '宽度=' 480 ' onclick=' test()' tr th colspan=' 16 '键盘模拟输入密码器/th/tr tr TD ~/TD TD TD！TD/TD TD行跨度=' 2 '宽度=' 120 '退格/TD/tr TD `/TD TD TD class=' num ' 1/TD TD TD class=' num ' 2/TD TD TD class=' num ' 3/TD TD TD class=' num ' 4/TD TD class=' num ' 5/TD TD TD TD class=' num ' 6/TD TD TD TD class=' num ' 7/TD class=' num ' 8/TD TD TD TD class=' num ' 0/TD TD TD-/TD TD=/TD \/tr tdq/TD tdw/TD TDE/TD TDT切换大/小写/TD/tr TDA/TD TDS/TD TDD/TD TDF/TD tdg/TD tdh/TD tdj/TD tdk/TD tdl/TD TD TD TD TD TD :/TD TD TD/TD TD TD； /TD TD TD/TD/TD TD栏跨度=' 3 '行跨度=' 3 ' ENTER/TD/tr TDZ/TD tdx/TD TDC/TD TDV/TD TDB/TD tdn/TD TDM/TD TD TD TD/TD TD TD？TD/TD，TD/TD .TD/TD//TD/tr/table/div/body/html希望本文所述对大家Java脚本语言程序设计有所帮助。