下面小编要跟大家分享Js之软键盘实现(源码)，简单的过程中其实暗藏玄机，还是要细心学习，喜欢还请记得收藏哦！
鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。
下载大键盘:
小键盘：
效果还原:Default.aspx,softkeyboard.js,softkey.CSS三个文件
js代码:
softkeyboard.js
2function()
3{
4password1=null;
5initCalc();
6}
7var password1;
8var CapsLockValue=0;
9var checkSoftKey;
10function setVariables() {
11tablewidth=630;
12tableheight=20;
13if ( == "Netscape") {
14horz=".left";
15vert=".top";
16docStyle="document.";
17styleDoc="";
18innerW="";
19innerH="";
20offsetX="";
21offsetY="";
22}
23else {
24horz=".pixelLeft";
25vert=".pixelTop";
26docStyle="";
27styleDoc=".style";
28innerW="";
29innerH="";
30offsetX="";
31offsetY="";
32}
33}
34function checkLocation() {
35if (checkSoftKey) {
36objectXY="softkeyboard";
37var availableX=eval(innerW);
38var availableY=eval(innerH);
39var currentX=eval(offsetX);
40var currentY=eval(offsetY);
41x=availableX-tablewidth+currentX;
42y=currentY;
43evalMove();
44}
45setTimeout("checkLocation()",0);
46}
47function evalMove() {
48eval(docStyle + objectXY + styleDoc + vert + "=" + y);
49}
;
51currentX = currentY = 0;
52whichIt = null;
53lastScrollX = 0; lastScrollY = 0;
54NS = () ？ 1 : 0;
55IE = (document.all) ？ 1: 0;
56function heartBeat() {
57if(IE) { diffY = ; diffX = ; }
58if(NS) { diffY = ; diffX = ; }
59if(diffY != lastScrollY) {
60percent = .1 * (diffY - lastScrollY);
61if(percent 0) percent = ();
62else percent = ();
63if(IE) += percent;
64if(NS) += percent;
65lastScrollY = lastScrollY + percent;}
66if(diffX != lastScrollX) {
67percent = .1 * (diffX - lastScrollX);
68if(percent 0) percent = ();
69else perce
ageXOffset) = 0+;
119if(whichIt.top 0+) whichIt.top = 0+;
120if( ( + ) = (+-17)) = ((+)-)-17;
121if( (whichIt.top + ) = (+-17)) whichIt.top = (
(+)-)-17;
122return false;}
123return false; }
124function dropIt() {whichIt = null;
125if(NS) ();
126return true; }
127if(NS) {window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
128window.onmousedown = grabIt;
129window.onmousemove = moveIt;
130window.onmouseup = dropIt; }
131if(IE) {
132document.onmousedown = grabIt;
133document.onmousemove = moveIt;
134document.onmouseup = dropIt; }
135var style1="style";
136style1+=".btn_letter {BORDER-RIGHT: 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: 1px solid; PADDING-LEFT: 2px;FONT-SIZE: 14px; BORDER-LEFT: 1px solid; CURSOR: hand;PADDING-TOP: 1px; BORDER-BOTTOM: 1px solid; width:25px; height:20px;}";
137style1+=".btn_num {width:25px;BORDER-RIGHT:1px solid; PADDING-RIGHT: 1px; BORDER-TOP: 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; BORDER-LEFT: 1px solid; CURSOR: hand; PADDING-TOP: 1px; BORDER-BOTTOM: 1px solid;height:20px;}";
138style1+=".table_title {FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#B2DEF7, EndColorStr=#7AB7DA); height:26px;padding-top: 3px;}";
139style1+=".btn_input {BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid}";
140style1+="/style";
141document.write(style1); &nb
lt;/tdntd input type=button bgtype="2" name="button_number2" value=" 2 "/tdntd input type=button bgtype="2" name="button_number3" value=" 3 "/tdntd input type=button bgtype="2" name="button_number4" value=" 4 "/tdntd input type=button bgtype="2" name="button_number5" value=" 5 "/tdntd input type=button bgtype="2" name="button_number6" value=" 6 "/tdntd input type=button bgtype="2" name="button_number7" value=" 7 "/tdntd input type=button bgtype="2" name="button_number8" value=" 8 "/tdntd input type=button bgtype="2" name="button_number9" value=" 9 "/tdntd input bgtype="2" name="button_number0" type=button value=" 0 "/tdntd input type=button value=" - "/tdntd input type=button value=" = "/tdntd input type=button value=" \ "/tdntd /tdn/trntr align="left" valign="middle" ntd input type=button value=" q "/tdntd input type=button value=" w "/tdntd input type=button value=" e "/tdntd input type=button value=" r "/tdntd input type=button value=" t "/tdntd input type=button value=" y "/tdntd input type=button value=" u "/tdntd input type=button value=" i "/tdntd input type=button value=" o "/tdntd input name="button8" type=button value=" p "/tdntd Input name="button9" type=button value=" { "/tdntd input type=button value=" } "/tdntd input type=button value=" [ "/tdntd input type=button value=" ] "/tdntdinput name="button9" type=button onClick="capsLockText();setCapsLock();" onDblClick=
"capsLockText();setCapsLock();" value="切换大/小写"/tdn/trntr align="left" valign="middle" ntd input type=button value=" a "/tdntd input type=button value=" s "/tdntd input type=button value=" d "/tdntd input type=button value=" f "/tdntd input type=button value=" g "/tdntd input type=button value=" h "/tdntd input type=button value=" j "/tdntd input name="button3" type=button value=" k "/tdntd input name="button4" type=button value=" l ">
th = password1;
204var ttop = th.offsetTop;
205var thei = th.clientHeight;
206var tleft = th.offsetLeft;
207var ttyp = th.type;
208while (th = th.offsetParent){ttop+=th.offsetTop; tleft+=th.offsetLeft;}
209softkeyboard.style.top = ttop+thei+16;
210softkeyboard.style.left = tleft-100;
211softkeyboard.style.display="block";
212password1.readOnly=1;
213password1.blur();
214document.all.useKey.focus();
215if(null!=hideSelect){
216hideSelect();
217}
218}
219
220function setCapsLock()
221{
222if (CapsLockValue==0)
223{
224CapsLockValue=1
225}
226else
227{
228CapsLockValue=0
229}
230}
231function setCalcborder()
232{
233CalcTable.style.border="1px solid #B5ADF1"
234}
235function setHead()
236{
237CalcTable.cells[0].style.backgroundColor="#B5ADF1"
238}
239function setCalcButtonBg()
240{
241for(var i=0;iCalc.elements.length;i++)
242{
243if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="1")
244{
245if(Calc.elements[i].bgtype=="2"){
246Calc.elements[i].className="btn_num";
247}else{
248Calc.elements[i].className="btn_letter";
249}
250var str1=Calc.elements[i].value;
251str1=str1.trim();
252if(str1.length==1)
253{
254}
255var thisButtonValue=Calc.elements[i].value;
256thisButtonValue=thisButtonValue.trim();
257if(thisButtonValue.length==1)
258{
259Calc.elements[i].onclick=
260function ()
261{
262var thisButtonValue=this.value;
263thisButtonValue=thisButtonValue.trim();
264thisButtonValue=jiamiMimaKey(thisButtonValue);
265addValue(thisButtonValue);
266}
267Calc.elements[i].ondblclick=
268function ()
269{
270var thisButtonValue=this.value;
271thisButtonValue=thisButtonValue.trim();
272thisButtonValue=jiamiMimaKey(thisButtonValue);
273addValue(thisButtonValue);
274}
275}
276}
277}
278}
279function initCalc()
280{
281setCalcborder();
282setHead();
283setCalcButtonBg();
284}
285String.prototype.trim = function()
286{
287return this.replace(/(^s*)|(s*$)/g, "");
288}
289var capsLockFlag;
290capsLockFlag=true;
291function capsLockText()
292{
293if(capsLockFlag)
294{
295for(var i=0;iCalc.elements.length;i++)
296{
297var char=Calc.elements[i].value;
298var char=char.trim()
299if(Calc.elements[i].type=="button"&&char="a"&&char="z"&&char.length==1)
300{
301Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)-32)+" "
302}
303}
304}
305else
306{
307for(var i=0;iCalc.elements.length;i++)
308{
309var char=Calc.elements[i].value;
310var char=char.trim()
311if(Calc.elements[i].type=="button"&&char="A"&&char="Z"&&char.length==1)
312{
313Calc.eleme
p;return afterPass;
376}
Default.aspx:
1%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
2 ResponseEncoding="GB2312" %
3
4!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"
5html
6head
7 title软键盘/title
8 link href="softkey.css" type="text/css" rel="stylesheet"
9 script src="softkeyboard.js" type="text/javascript"/script
10/head
11body
12 form runat="server"
13 div align="center"
14input type="text"
15 onblur="tipLogPwd.className="tip_off""
16
17
18 /div
19 /form
20/body
21/html
22
softkey.css:
1#Page_content {}{
2 PADDING-RIGHT: 20px; PADDING-LEFT: 20px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 860px; PADDING-TOP: 0px
3}
4#Header {}{
5 BACKGROUND: url(../images5/blue/header_bg.gif) repeat-x left top
6}
7#Page_left {}{
8 FLOAT: left; MARGIN: 12px 0px 15px; WIDTH: 660px
9}
10#Page_right {}{
11 FLOAT: right; MARGIN: 15px 0px; WIDTH: 180px
12}
13#Footer {}{
14 PADDING-RIGHT: 2px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 20px; COLOR: #aaa; PADDING-TOP: 5px; TEXT-ALIGN: left
15}
16.Area_title {}{
17 PADDING-RIGHT: 2px; BORDER-TOP: #69c 2px solid; MARGIN-TOP: 10px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 13px; PADDING-BOTTOM: 7px; COLOR: #004d99; PADDING-TOP: 7px
18}
19.Area_content {}{
20 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; PADDING-TOP: 3px
21}
22.Area_button {}{
23 MARGIN-TOP: 7px; PADDING-LEFT: 90px
24}
25.Area_button IMG {}{
26 VERTICAL-ALIGN: 5px
27}
28.float_left {}{
29 FLOAT: left
30}
31.float_right
