Js之软键盘实现(源码)

2016-02-19 15:03 20 1 收藏

下面图老师小编要跟大家分享Js之软键盘实现(源码)，简单的过程中其实暗藏玄机，还是要细心学习，喜欢还请记得收藏哦！

【 tulaoshi.com - Web开发】

    鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。
下载大键盘: 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
1window.onload=
2function()
3{
4password1=null;
5initCalc();
6}
7var password1;
8var CapsLockValue=0;
9var checkSoftKey;
10function setVariables() {
11tablewidth=630;
12tableheight=20;
13if (navigator.appName == "Netscape") {
14horz=".left";
15vert=".top";
16docStyle="document.";
17styleDoc="";
18innerW="window.innerWidth";
19innerH="window.innerHeight";
20offsetX="window.pageXOffset";
21offsetY="window.pageYOffset";
22}
23else {
24horz=".pixelLeft";
25vert=".pixelTop";
26docStyle="";
27styleDoc=".style";
28innerW="document.body.clientWidth";
29innerH="document.body.clientHeight";
30offsetX="document.body.scrollLeft";
31offsetY="document.body.scrollTop";
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}
50self.onError=null;
51currentX = currentY = 0;
52whichIt = null;
53lastScrollX = 0; lastScrollY = 0;
54NS = (document.layers) ？ 1 : 0;
55IE = (document.all) ？ 1: 0;
56function heartBeat() {
57if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
58if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
59if(diffY != lastScrollY) {
60percent = .1 * (diffY - lastScrollY);
61if(percent 0) percent = Math.ceil(percent);
62else percent = Math.floor(percent);
63if(IE) document.all.softkeyboard.style.pixelTop += percent;
64if(NS) document.softkeyboard.top += percent;
65lastScrollY = lastScrollY + percent;}
66if(diffX != lastScrollX) {
67percent = .1 * (diffX - lastScrollX);
68if(percent 0) percent = Math.ceil(percent);
69else perce

ageXOffset) whichIt.left = 0+self.pageXOffset;
119if(whichIt.top 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
120if( (whichIt.left + whichIt.clip.width) = (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
121if( (whichIt.top + whichIt.clip.height) = (window.innerHeight+self.pageYOffset-17)) whichIt.top = (

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）(window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
122return false;}
123return false;    }
124function dropIt() {whichIt = null;
125if(NS) window.releaseEvents (Event.MOUSEMOVE);
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=

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）"capsLockText();setCapsLock();" value="切换大/小写" style="width:100px;"/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//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/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"
14          input id="tipLogPwd" type="text"
15           onblur="tipLogPwd.className='tip_off'"
16
17                style="width: 278px"
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

来源:http://www.tulaoshi.com/n/20160219/1608707.html

上一篇： excel怎么合并单元格呢
下一篇： AJAX 框架DWR 2.0 M1 发布

看过《Js之软键盘实现(源码)》的人还看了以下文章更多>>

JS教程:lightbox源码解析

标签： Web开发

lightbox源码解析 function getPageScroll(){ var yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; //NS } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict yScroll = document.documentElement.scrollTop; } else if (document.body) {// all other Explorer...

JS教程:学习笔记之JS类

标签： Web开发

背景：接触JavaScript快两年了。从最开始对她充满着好奇，到现在的学习了许多关于她的框架。朋友问我：都有这么多框架，你为何还要去学最底层的面向对象呢？其实这个问题：另一个朋友已经替我回答了。无论以后框架在怎么变，只要了解底层的原理，学起来都是很容易上手的。好了，我们开始学习了。 1、创...

js实现字体渐渐消失

标签： Web开发

view plaincopy to clipboardprint？ HTML HEAD SCRIPT language=JavaScript var col = new Array(); col[15] = '#000000';&...

浮动广告js类实现

标签： Web开发

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

支持IE和firefox的js代码美化加亮源码

标签： Web开发

自己在IE和FF试过了js代码加亮效果，用了一段别人的压缩后的代码作为例子，受限制，删了一部分。发现错误的大虾一定要留下测试用的代码啊！脚本之家 www.jb51.net #oTxt{ color:#333333; background-color:#f0f0f0; font-family:Courier New; font-size:12px; margin:0; line-height:13px; border-left:none; overflo...

查看更多精彩>>