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

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

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

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

* {
 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;
}










 

 

  
键盘模拟输入密码器
 
 

  
~
  
!
  
@
  
#
  
$
  
%
  
^
  
&
  
*
  
(
  
)
  
_
  
+
  
|
  
退格
 
 

  
`
  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
0
  
-
  
=
  

 
 

  
q
  
w
  
e
  
r
  
t
  
y
  
u
  
i
  
o
  
p
  
{
  
}
  
[
  
]
  
切换大/小写
 
 

  
a
  
s
  
d
  
f
  
g
  
h
  
j
  
k
  
l
  
:
  
"
  
;
  
'
  
ENTER
 
 

  
z
  
x
  
c
  
v
  
b
  
n
  
m
  
<
  
>
  
?
  
,
  
.
  
/
 
 

希望本文所述对大家Javascript程序设计有所帮助。