鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。
下载大键盘: http://plete=\"off\"><tr><td
class=\"table_title\"align=\"right\"valign=\"middle\"bgcolor=\"\"style=\"cursor:
default;height:\"><INPUTtype=hiddenvalue=\"\"name=password><INPUTtype=hiddenvalue=ok
name=action>&nbsp<fontstyle=\"font-weight:bold;font-size:px;color:#BC\">博客园
&nbsp;&nbsp;密码输入器
</font>&nbsp&nbsp&nbsp&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&n
bsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp&nbsp;<INPUTid=useKeyclass=\"btn_input\"type=button
value=\"使用键盘输入\"bgtype=\"\"onclick=\"password.readOnly=;password.focus
();closekeyboard();password.value='';\"><spanstyle=\"width:px;\"></span></td></tr><tr
align=\"center\"><tdalign=\"center\"bgcolor=\"#FFFFFF\"><tablealign=\"center\"width=\"%
\"border=\"\"cellspacing=\"\"cellpadding=\"\">\n<tralign=\"left\"valign=\"middle\">
\n<td><inputtype=buttonvalue=\"~\"></td>\n<td><inputtype=buttonvalue=\"!
\"></td>\n<td><inputtype=buttonvalue=\"@\"></td>\n<td><inputtype=buttonvalue=\"#
\"></td>\n<td><inputtype=buttonvalue=\"$\"></td>\n<td><inputtype=buttonvalue=\"%
\"></td>\n<td><inputtype=buttonvalue=\"^\"></td>\n<td><inputtype=buttonvalue=\"&
\"></td>\n<td><inputtype=buttonvalue=\"*\"></td>\n<td><inputtype=buttonvalue=\"(
\"></td>\n<td><inputtype=buttonvalue=\")\"></td>\n<td><inputtype=buttonvalue=\"_
\"></td>\n<td><inputtype=buttonvalue=\"+\"></td>\n<td><inputtype=buttonvalue=\"|
\"></td>\n<tdcolspan=\"\"rowspan=\"\"><inputname=\"button\"type=buttonvalue=\"退
格\"onclick=\"setpassvalue();\"onDblClick=\"setpassvalue();\"
style=\"width:px;height:px\">\n</td>\n</tr>\n<tralign=\"left\"valign=\"middle\">
\n<td><inputtype=buttonvalue=\"`\"></td>\n<td><inputtype=buttonbgtype=\"\"
name=\"button_number\"value=\"\"></td>\n<td><inputtype=buttonbgtype=\"\"
name=\"button_number\"value=\"\"></td>\n<td><inputtype=buttonbgtype=\"\"
name=\"button_number\"value=\"\"></td>\n<td><inputtype=buttonbgtype=\"\"
name=\"button_number\"value=\"\"></td>\n<td><inputtype=buttonbgtype=\"\"
name=\"button_number\"value=\"\"></td>\n<td><inputtype=buttonbgtype=\"\"
name=\"button_number\"value=\"\"></td>\n<td><inputtype=buttonbgtype=\"\"
name=\"button_number\"value=\"\"></td>\n<td><inputtype=buttonbgtype=\"\"
name=\"button_number\"value=\"\"></td>\n<td><inputtype=buttonbgtype=\"\"
name=\"button_number\"value=\"\"></td>\n<td><inputbgtype=\"\"
name=\"button_number\"type=buttonvalue=\"\"></td>\n<td><inputtype=buttonvalue=\"-
\"></td>\n<td><inputtype=buttonvalue=\"=\"></td>\n<td><inputtype=buttonvalue=\"\\
\"></td>\n<td></td>\n</tr>\n<tralign=\"left\"valign=\"middle\">\n<td><inputtype=button
value=\"q\"></td>\n<td><inputtype=buttonvalue=\"w\"></td>\n<td><inputtype=button
value=\"e\"></td>\n<td><inputtype=buttonvalue=\"r\"></td>\n<td><inputtype=button
value=\"t\"></td>\n<td><inputtype=buttonvalue=\"y\"></td>\n<td><inputtype=button
value=\"u\"></td>\n<td><inputtype=buttonvalue=\"i\"></td>\n<td><inputtype=button
value=\"o\"></td>\n<td><inputname=\"button\"type=buttonvalue=\"p\"></td>\n<td>
<Inputname=\"button\"type=buttonvalue=\"{\"></td>\n<td><inputtype=buttonvalue=\"}
\"></td>\n<td><inputtype=buttonvalue=\"[\"></td>\n<td><inputtype=buttonvalue=\"]
\"></td>\n<td><inputname=\"button\"type=buttononClick=\"capsLockText();setCapsLock();\"
onDblClick=\"capsLockText();setCapsLock();\"value=\"切换大/小写\"
style=\"width:px;\"></td>\n</tr>\n<tralign=\"left\"valign=\"middle\">\n<td><input
type=buttonvalue=\"a\"></td>\n<td><inputtype=buttonvalue=\"s\"></td>\n<td><input
type=buttonvalue=\"d\"></td>\n<td><inputtype=buttonvalue=\"f\"></td>\n<td><input
type=buttonvalue=\"g\"></td>\n<td><inputtype=buttonvalue=\"h\"></td>\n<td><input
type=buttonvalue=\"j\"></td>\n<td><inputname=\"button\"type=buttonvalue=\"k
\"></td>\n<td><inputname=\"button\"type=buttonvalue=\"l\"></td>\n<td><input
name=\"button\"type=buttonvalue=\":\"></td>\n<td><inputname=\"button\"type=button
value=\"&quot;\"></td>\n<td><inputtype=buttonvalue=\";\"></td>\n<td><input
type=buttonvalue=\"'\"></td>\n<tdrowspan=\"\"colspan=\"\"><inputname=\"button\"
type=buttononclick=\"OverInput();\"value=\"确定\"
style=\"width:px;height:px;\"></td>\n</tr>\n<tralign=\"left\"valign=\"middle\">
\n<td><inputname=\"button\"type=buttonvalue=\"z\"></td>\n<td><inputtype=button
value=\"x\"></td>\n<td><inputtype=buttonvalue=\"c\"></td>\n<td><inputtype=button
value=\"v\"></td>\n<td><inputtype=buttonvalue=\"b\"></td>\n<td><inputtype=button
value=\"n\"></td>\n<td><inputtype=buttonvalue=\"m\"></td>\n<td><inputtype=button
value=\"&lt;\"></td>\n<td><inputtype=buttonvalue=\"&gt;\"></td>\n<td><input
type=buttonvalue=\"?\"></td>\n<td><inputtype=buttonvalue=\",\"></td>\n<td><input
type=buttonvalue=\".\"></td>\n<td><inputtype=buttonvalue=\"/
\"></td>\n</tr>\n</table></td></FORM></tr></table></DIV>");

functionaddValue(newValue)
{
if(CapsLockValue==)
{
varstr=Calc.password.value;
if(str.length<password.maxLength)
{
Calc.password.value+=newValue;
}
if(str.length<=password.maxLength)
{
password.value=Calc.password.value;
}
}
else
{
varstr=Calc.password.value;
if(str.length<password.maxLength)
{
//Calc.password.value+=newValue.toUpperCase();
Calc.password.value+=newValue;
}
if(str.length<=password.maxLength)
{
password.value=Calc.password.value;
}
}
}

functionsetpassvalue()
{
varlongnum=Calc.password.value.length;
varnum
num=Calc.password.value.substr(,longnum-);
Calc.password.value=num;
varstr=Calc.password.value;
password.value=Calc.password.value;
}

functionOverInput()
{
varstr=Calc.password.value;
password.value=Calc.password.value;
closekeyboard();
Calc.password.value="";
password.readOnly=;
}

functionclosekeyboard(theForm)
{
softkeyboard.style.display="none";
if(null!=unhideSelect){
unhideSelect();
}
}

functionshowkeyboard()
{
randomNumberButton();
varth=password;
varttop=th.offsetTop;
varthei=th.clientHeight;
vartleft=th.offsetLeft;
varttyp=th.type;
while(th=th.offsetParent){ttop+=th.offsetTop;tleft+=th.offsetLeft;}
softkeyboard.style.top=ttop+thei+;
softkeyboard.style.left=tleft-;
softkeyboard.style.display="block";
password.readOnly=;
password.blur();
document.all.useKey.focus();
if(null!=hideSelect){
hideSelect();
}
}

functionsetCapsLock()
{
if(CapsLockValue==)
{
CapsLockValue=
}
else
{
CapsLockValue=
}
}
functionsetCalcborder()
{
CalcTable.style.border="pxsolid#BADF"
}
functionsetHead()
{
CalcTable.cells[].style.backgroundColor="#BADF"
}
functionsetCalcButtonBg()
{
for(vari=;i<Calc.elements.length;i++)
{
if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="")
{
if(Calc.elements[i].bgtype==""){
Calc.elements[i].className="btn_num";
}else{
Calc.elements[i].className="btn_letter";
}
varstr=Calc.elements[i].value;
str=str.trim();
if(str.length==)
{
}
varthisButtonValue=Calc.elements[i].value;
thisButtonValue=thisButtonValue.trim();
if(thisButtonValue.length==)
{
Calc.elements[i].onclick=
function()
{
varthisButtonValue=this.value;
thisButtonValue=thisButtonValue.trim();
thisButtonValue=jiamiMimaKey(thisButtonValue);
addValue(thisButtonValue);
}
Calc.elements[i].ondblclick=
function()
{
varthisButtonValue=this.value;
thisButtonValue=thisButtonValue.trim();
thisButtonValue=jiamiMimaKey(thisButtonValue);
addValue(thisButtonValue);
}
}
}
}
}
functioninitCalc()
{
setCalcborder();
setHead();
setCalcButtonBg();
}
String.prototype.trim=function()
{
returnthis.replace(/(^\s*)|(\s*$)/g,"");
}
varcapsLockFlag;
capsLockFlag=true;
functioncapsLockText()
{
if(capsLockFlag)
{
for(vari=;i<Calc.elements.length;i++)
{
varchar=Calc.elements[i].value;
varchar=char.trim()
if(Calc.elements[i].type=="button"&&char>="a"&&char<="z"&&char.length==)
{
Calc.elements[i].value=""+String.fromCharCode(char.charCodeAt()-)+""
}
}
}
else
{
for(vari=;i<Calc.elements.length;i++)
{
varchar=Calc.elements[i].value;
varchar=char.trim()
if(Calc.elements[i].type=="button"&&char>="A"&&char<="Z"&&char.length==)
{
Calc.elements[i].value=""+String.fromCharCode(char.charCodeAt()+)+""
}
}
}
capsLockFlag=!capsLockFlag;
}

functionrandomNumberButton(){
vara=newArray();
a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;
varrandomNum;
vartimes=;
for(vari=;i<;i++){
randomNum=parseInt(Math.random()*);
vartmp=a[];
a[]=a[randomNum];
a[randomNum]=tmp;
}
Calc.button_number.value=""+a[]+"";
Calc.button_number.value=""+a[]+"";
Calc.button_number.value=""+a[]+"";
Calc.button_number.value=""+a[]+"";
Calc.button_number.value=""+a[]+"";
Calc.button_number.value=""+a[]+"";
Calc.button_number.value=""+a[]+"";
Calc.button_number.value=""+a[]+"";
Calc.button_number.value=""+a[]+"";
Calc.button_number.value=""+a[]+"";
}

functionhideSelect(){
vari=;
while(i<document.getElementsByTagName("select").length){
document.getElementsByTagName("select")[i].style.visibility="hidden";
i=i+;
}
}

functionunhideSelect(){
vari=;
while(i<document.getElementsByTagName("select").length){
document.getElementsByTagName("select")[i].style.visibility="visible";
i=i+;
}
}


functionjiamiMimaKey(newValue){
if(typeof(b)=="undefined"||typeof(ifUseYinshe)=="undefined"||ifUseYinshe==
){returnnewValue;}
vareveryone='';
varafterPass='';
for(vari=;i<newValue.length;i++){
everyone=newValue.charAt(i);
for(varj=;j<((b.length)/);j++){
if(everyone==b[*j]){
afterPass=afterPass+b[*j+];
break;
}
}
}
newValue=afterPass;
jiami=;
returnafterPass;
}

Default.aspx:
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"
Inherits="_Default"
ResponseEncoding="GB"%>

<!DOCTYPEhtmlPUBLIC"-//WC//DTDXHTML.Transitional//EN"
"http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html>
<head>
<title>软键盘</title>
<linkhref="softkey.css"type="text/css"rel="stylesheet">
<scriptsrc="softkeyboard.js"type="text/javascript"></script>
</head>
<body>
<formrunat="server">
<divalign="center">
<inputid="tipLogPwd"type="text"onkeydown="Calc.password.value=this.value"
onblur="tipLogPwd.className='tip_off'"
onclick="password=this;showkeyboard();this.readOnly=;Calc.password.value=''"
style="width:px">
</div>
</form>
</body>
</html>

softkey.css:
复制代码 代码如下:
#Page_content{}{
PADDING-RIGHT:px;PADDING-LEFT:px;BACKGROUND:#fff;PADDING-BOTTOM:px;
MARGIN:pxauto;WIDTH:px;PADDING-TOP:px
}
#Header{}{
BACKGROUND:url(../images/blue/header_bg.gif)repeat-xlefttop
}
#Page_left{}{
FLOAT:left;MARGIN:pxpxpx;WIDTH:px
}
#Page_right{}{
FLOAT:right;MARGIN:pxpx;WIDTH:px
}
#Footer{}{
PADDING-RIGHT:px;BORDER-TOP:#eeepxsolid;PADDING-LEFT:px;PADDING-BOTTOM:
px;COLOR:#aaa;PADDING-TOP:px;TEXT-ALIGN:left
}
.Area_title{}{
PADDING-RIGHT:px;BORDER-TOP:#cpxsolid;MARGIN-TOP:px;PADDING-LEFT:px;
FONT-WEIGHT:bold;FONT-SIZE:px;PADDING-BOTTOM:px;COLOR:#d;PADDING-TOP:px
}
.Area_content{}{
PADDING-RIGHT:px;PADDING-LEFT:px;PADDING-BOTTOM:px;PADDING-TOP:px
}
.Area_button{}{
MARGIN-TOP:px;PADDING-LEFT:px
}
.Area_buttonIMG{}{
VERTICAL-ALIGN:px
}
.float_left{}{
FLOAT:left
}
.float_right{}{
FLOAT:right
}
.content_title{}{
PADDING-RIGHT:px;PADDING-LEFT:px;FONT-WEIGHT:bold;PADDING-BOTTOM:px;COLOR:
#;PADDING-TOP:px
}
.relative{}{
PADDING-RIGHT:px;BORDER-TOP:#cpxsolid;PADDING-LEFT:px;LIST-STYLE-
POSITION:inside;BACKGROUND:nonetransparentscrollrepeat%%;LIST-STYLE-IMAGE:url
(../images/blue/icon_list.gif);PADDING-BOTTOM:px;MARGIN:pxpxpx;PADDING-TOP:px
}
.relativeLI{}{
PADDING-RIGHT:px;PADDING-LEFT:px;FONT-WEIGHT:normal;PADDING-BOTTOM:px;
MARGIN:pxpxpx;COLOR:#;PADDING-TOP:px;BORDER-BOTTOM:#dddpxsolid
}
{}{
PADDING-RIGHT:px;PADDING-LEFT:px;PADDING-BOTTOM:px;MARGIN:px;PADDING-TOP:
px
}
BODY{}{
BACKGROUND:#eee
}
BODY{}{
FONT:px"宋体",Tahoma;COLOR:#
}
DIV{}{
FONT:px"宋体",Tahoma;COLOR:#
}
TD{}{
FONT:px"宋体",Tahoma;COLOR:#
}
SPAN{}{
FONT:px"宋体",Tahoma;COLOR:#
}
SELECT{}{
FONT:px"宋体",Tahoma;COLOR:#
}
P{}{
FONT:px"宋体",Tahoma;COLOR:#
}
IMG{}{
BORDER-TOP-WIDTH:px;BORDER-LEFT-WIDTH:px;BORDER-BOTTOM-WIDTH:px;BORDER-
RIGHT-WIDTH:px
}
A{}{
COLOR:#;TEXT-DECORATION:none
}
A:hover{}{
COLOR:#b;TEXT-DECORATION:none
}
INPUT{}{
FONT:px"宋体",Tahoma
}
INPUT.button{}{
BORDER-TOP-WIDTH:px;PADDING-RIGHT:px;PADDING-LEFT:px;BORDER-LEFT-WIDTH:
px;BACKGROUND:url(../images/blue/button_bg.gif)#adarepeat-xlefttop;BORDER-
BOTTOM-WIDTH:px;PADDING-BOTTOM:px;CURSOR:hand;COLOR:#fff;MARGIN-RIGHT:px;
PADDING-TOP:px;BORDER-RIGHT-WIDTH:px
}
INPUT.button_dis{}{
BORDER-TOP-WIDTH:px;PADDING-RIGHT:px;PADDING-LEFT:px;BORDER-LEFT-WIDTH:
px;BORDER-BOTTOM-WIDTH:px;PADDING-BOTTOM:px;CURSOR:hand;COLOR:#fff;MARGIN-RIGHT:
px;PADDING-TOP:px;BORDER-RIGHT-WIDTH:px
}
UL{}{
PADDING-LEFT:px;FONT-WEIGHT:bold;LIST-STYLE-POSITION:outside;BACKGROUND:url
(../images/icon_ul.gif)no-repeatlefttop;LIST-STYLE-IMAGE:url
(../images/blue/icon_list.gif);MARGIN:px;COLOR:#
}
LI{}{
PADDING-RIGHT:px;PADDING-LEFT:px;FONT-WEIGHT:normal;PADDING-BOTTOM:px;
MARGIN:pxpxpx;COLOR:#;PADDING-TOP:px
}
.clear{}{
CLEAR:both
}
.top_margin{}{
MARGIN:pxpxpxpx
}
.text_bold{}{
FONT-WEIGHT:bold
}
.step_on.text_content{}{
COLOR:#
}
.text_content{}{
PADDING-RIGHT:px;PADDING-LEFT:px;PADDING-BOTTOM:px;PADDING-TOP:px;BORDER
-BOTTOM:#eeepxsolid
}
.text_red{}{
COLOR:#b
}
A.text_red:hover{}{
COLOR:#
}
.req{}{
FONT-WEIGHT:bold;COLOR:#b
}
.info{}{
COLOR:#
}
.dark{}{
COLOR:#
}
.text_big{}{
FONT-SIZE:px;COLOR:#;LINE-HEIGHT:px
}
.big{}{
FONT-SIZE:px
}
.reg_flow{}{
PADDING-RIGHT:px;PADDING-LEFT:px;FONT-WEIGHT:normal;FONT-SIZE:px;
BACKGROUND:#fff;PADDING-BOTTOM:px;MARGIN:pxpxpx;COLOR:#;PADDING-TOP:
px
}
.reg_title{}{
PADDING-RIGHT:px;PADDING-LEFT:px;FONT-WEIGHT:bold;FONT-SIZE:px;
BACKGROUND:url(../images/icon_reg.gif)no-repeatlefttop;PADDING-BOTTOM:px;COLOR:
#d;PADDING-TOP:px
}
.flow_focus{}{
FONT-WEIGHT:bold;COLOR:#b
}
.flow_undo{}{
COLOR:#
}
.flow_done{}{
COLOR:#
}
.image_safe{}{
PADDING-LEFT:px;BACKGROUND:url(../images/icon_safe_big.gif)no-repeatlefttop
}
.text_success{}{
BORDER-RIGHT:#cpxsolid;PADDING-RIGHT:px;BORDER-TOP:#cpxsolid;
PADDING-LEFT:px;BACKGROUND:url(../images/blue/icon_success.gif)#ffffno-repeatpx
%;PADDING-BOTTOM:px;BORDER-LEFT:#cpxsolid;PADDING-TOP:px;BORDER-BOTTOM:
#cpxsolid
}
.text_notice{}{
BORDER-RIGHT:#cpxsolid;PADDING-RIGHT:px;BORDER-TOP:#cpxsolid;
PADDING-LEFT:px;BACKGROUND:url(../images/blue/icon_gantan.gif)#ffffno-repeatpx
%;PADDING-BOTTOM:px;BORDER-LEFT:#cpxsolid;PADDING-TOP:px;BORDER-BOTTOM:
#cpxsolid
}
.reg_info{}{
BORDER-RIGHT:#cpxsolid;PADDING-RIGHT:px;BORDER-TOP:#cpxsolid;
PADDING-LEFT:px;BACKGROUND:url(../images/blue/icon_info.gif)#ffffno-repeatpx
%;PADDING-BOTTOM:px;BORDER-LEFT:#cpxsolid;PADDING-TOP:px;BORDER-BOTTOM:#c
pxsolid
}
.step_on.tip_off{}{
BORDER-RIGHT:#deefpxsolid;PADDING-RIGHT:px;BORDER-TOP:#deefpxsolid;
PADDING-LEFT:px;BACKGROUND:url(../images/blue/arr_tip_off.gif)#fffno-repeatpxpx;
PADDING-BOTTOM:px;BORDER-LEFT:#deefpxsolid;COLOR:#;PADDING-TOP:px;BORDER-
BOTTOM:#deefpxsolid
}
.tip_off{}{
PADDING-RIGHT:px;PADDING-LEFT:px;BACKGROUND:url
(../images/blue/arr_tip_off.gif)#fffno-repeatpxpx;PADDING-BOTTOM:px;COLOR:#;
PADDING-TOP:px
}
.tip_on{}{
BORDER-RIGHT:#pxsolid;PADDING-RIGHT:px;BORDER-TOP:#pxsolid;
PADDING-LEFT:px;BACKGROUND:url(../images/blue/arr_tip_on.gif)#efdeno-repeatpx
px;PADDING-BOTTOM:px;BORDER-LEFT:#pxsolid;COLOR:#;PADDING-TOP:px;
BORDER-BOTTOM:#pxsolid
}
.tip_onIMG{}{
VERTICAL-ALIGN:top
}
.tip_offIMG{}{
VERTICAL-ALIGN:top
}
.step_on{}{
PADDING-RIGHT:px;PADDING-LEFT:px;BACKGROUND:#fff;PADDING-BOTTOM:px;
PADDING-TOP:px
}
.step_off{}{
PADDING-RIGHT:px;PADDING-LEFT:px;BACKGROUND:#fff;PADDING-BOTTOM:px;
PADDING-TOP:px
}
.step_on.content_title{}{
COLOR:#
}
P{}{
MARGIN:pxpx;TEXT-INDENT:em
}
.btn_letter{}{
BORDER-LEFT-COLOR:#bebd;FILTER:progid:DXImageTransform.Microsoft.Gradient
(GradientType=,StartColorStr=#ffffff,EndColorStr=#DDDCDC);BORDER-BOTTOM-COLOR:#cb;
COLOR:#bc;BORDER-TOP-COLOR:#bebd;BORDER-RIGHT-COLOR:#cb
}
.btn_num{}{
BORDER-LEFT-COLOR:#ebff;FILTER:progid:DXImageTransform.Microsoft.Gradient
(GradientType=,StartColorStr=#ffffff,EndColorStr=#BD);BORDER-BOTTOM-COLOR:#ebff;
COLOR:black;BORDER-TOP-COLOR:#ebff;BORDER-RIGHT-COLOR:#ebff
}

想还原事例，又怕麻烦的朋友，也可以留下Email,将发到您邮箱！水平有限，写不出多高深
和理论性较强的文章，只能发些实用的东西给大家.
Ps:一周一博，工作太忙，时间太少！
小键盘本地下载 下载此文件 大键盘本地下载 下载此文件