Js之软键盘实现(js源码)
发布时间：2007-01-30 作者： 来源：转载
鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。
鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。
下载大键盘: http://www.cnblogs.com/Files/sccxszy/softKey.rar
小键盘：http://www.cnblogs.com/Files/sccxszy/smallSoftkey.rar
小键盘:
效果还原:Default.aspx,softkeyboard.js,softkey.css三个文件
js代码:
softkeyboard.js
复制代码 代码如下:
window.onload=
function()
{
password=null;
initCalc();
}
varpassword;
varCapsLockValue=;
varcheckSoftKey;
functionsetVariables(){
tablewidth=;
tableheight=;
if(navigator.appName=="Netscape"){
horz=".left";
vert=".top";
docStyle="document.";
styleDoc="";
innerW="window.innerWidth";
innerH="window.innerHeight";
offsetX="window.pageXOffset";
offsetY="window.pageYOffset";
}
else{
horz=".pixelLeft";
vert=".pixelTop";
docStyle="";
styleDoc=".style";
innerW="document.body.clientWidth";
innerH="document.body.clientHeight";
offsetX="document.body.scrollLeft";
offsetY="document.body.scrollTop";
}
}
functioncheckLocation(){
if(checkSoftKey){
objectXY="softkeyboard";
varavailableX=eval(innerW);
varavailableY=eval(innerH);
varcurrentX=eval(offsetX);
varcurrentY=eval(offsetY);
x=availableX-tablewidth+currentX;
y=currentY;
evalMove();
}
setTimeout("checkLocation()",);
}
functionevalMove(){
eval(docStyle+objectXY+styleDoc+vert+"="+y);
}
self.onError=null;
currentX=currentY=;
whichIt=null;
lastScrollX=;lastScrollY=;
NS=(document.layers)?:;
IE=(document.all)?:;
functionheartBeat(){
if(IE){diffY=document.body.scrollTop;diffX=document.body.scrollLeft;}
if(NS){diffY=self.pageYOffset;diffX=self.pageXOffset;}
if(diffY!=lastScrollY){
percent=.*(diffY-lastScrollY);
if(percent>)percent=Math.ceil(percent);
elsepercent=Math.floor(percent);
if(IE)document.all.softkeyboard.style.pixelTop+=percent;
if(NS)document.softkeyboard.top+=percent;
lastScrollY=lastScrollY+percent;}
if(diffX!=lastScrollX){
percent=.*(diffX-lastScrollX);
if(percent>)percent=Math.ceil(percent);
elsepercent=Math.floor(percent);
if(IE)document.all.softkeyboard.style.pixelLeft+=percent;
if(NS)document.softkeyboard.left+=percent;
lastScrollX=lastScrollX+percent;}}
functioncheckFocus(x,y){
stalkerx=document.softkeyboard.pageX;
stalkery=document.softkeyboard.pageY;
stalkerwidth=document.softkeyboard.clip.width;
stalkerheight=document.softkeyboard.clip.height;
if((x>stalkerx&&x<(stalkerx+stalkerwidth))&&(y>stalkery&&y<
(stalkery+stalkerheight)))returntrue;
elsereturnfalse;}
functiongrabIt(e){
checkSoftKey=false;
if(IE){
whichIt=event.srcElement;
while(whichIt.id!=null&&whichIt.id.indexOf("softkeyboard")==-){
whichIt=whichIt.parentElement;
if(whichIt==null){returntrue;}}
if(whichIt.style!=null){
whichIt.style.pixelLeft=whichIt.offsetLeft;
whichIt.style.pixelTop=whichIt.offsetTop;
}
currentX=(event.clientX+document.body.scrollLeft);
currentY=(event.clientY+document.body.scrollTop);
}else{
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus(e.pageX,e.pageY)){
whichIt=document.softkeyboard;
StalkerTouchedX=e.pageX-document.softkeyboard.pageX;
StalkerTouchedY=e.pageY-document.softkeyboard.pageY;}}
returntrue;}
functionmoveIt(e){
if(whichIt==null){returnfalse;}
if(IE){
if(whichIt.style!=null){
newX=(event.clientX+document.body.scrollLeft);
newY=(event.clientY+document.body.scrollTop);
distanceX=(newX-currentX);distanceY=(newY-currentY);
currentX=newX;currentY=newY;
whichIt.style.pixelLeft+=distanceX;
whichIt.style.pixelTop+=distanceY;
if(whichIt.style.pixelTopdocument.body.scrollTop;
if(whichIt.style.pixelLeftdocument.body.scrollLeft;
if(whichIt.style.pixelLeft>document.body.offsetWidth-document.body.scrollLeft-
whichIt.style.pixelWidth-)whichIt.style.pixelLeft=document.body.offsetWidth-
whichIt.style.pixelWidth-;
if(whichIt.style.pixelTop>document.body.offsetHeight+document.body.scrollTop-
whichIt.style.pixelHeight-)whichIt.style.pixelTop=document.body.offsetHeight+
document.body.scrollTop-whichIt.style.pixelHeight-;
event.returnValue=false;
}
}else{
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left<+self.pageXOffset)whichIt.left=+self.pageXOffset;
if(whichIt.top<+self.pageYOffset)whichIt.top=+self.pageYOffset;
if((whichIt.left+whichIt.clip.width)>=(window.innerWidth+self.pageXOffset-))
whichIt.left=((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-;
if((whichIt.top+whichIt.clip.height)>=(window.innerHeight+self.pageYOffset-))
whichIt.top=((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-;
returnfalse;}
returnfalse;}
functiondropIt(){whichIt=null;
if(NS)window.releaseEvents(Event.MOUSEMOVE);
returntrue;}
if(NS){window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown=grabIt;
window.onmousemove=moveIt;
window.onmouseup=dropIt;}
if(IE){
document.onmousedown=grabIt;
document.onmousemove=moveIt;
document.onmouseup=dropIt;}
varstyle="";
document.write(style);
document.write("style="position:absolute;left:px;top:px;width:px;z-index:;display:none">
");
functionaddValue(newValue)
{
if(CapsLockValue==)
{
varstr=Calc.password.value;
if(str.length{
Calc.password.value+=newValue;
}
if(str.length<=password.maxLength)
{
password.value=Calc.password.value;
}
}
else
{
varstr=Calc.password.value;
if(str.length{
//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{
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{
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{
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(idocument.getElementsByTagName("select")[i].style.visibility="hidden";
i=i+;
}
}
functionunhideSelect(){
vari=;
while(idocument.getElementsByTagName("select")[i].style.visibility="visible";
i=i+;
}
}
functionjiamiMimaKey(newValue){
if(typeof(b)=="undefined"||typeof(ifUseYinshe)=="undefined"||ifUseYinshe==
){returnnewValue;}
vareveryone='';
varafterPass='';
for(vari=;ieveryone=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"%>
"http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
软键盘
onblur="tipLogPwd.className='tip_off'"
onclick="password=this;showkeyboard();this.readOnly=;Calc.password.value=''"
style="width:px">
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:一周一博，工作太忙，时间太少！
小键盘本地下载
下载此文件 大键盘本地下载
下载此文件
