网页设计实用技术：JS软键盘实现(源码)

    鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。
效果还原: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;

[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] 下一页

复制本页网址和标题，发送给你QQ/Msn的好友一起分享

上一篇:网页制作技术之Javascript精华代码集

下一篇:网页实例：JS+CSS打造可拖动的聊天窗口层