Js 소프트 키보드 구현(js 소스코드)_javascript 기술

보안 고려 사항을 고려하여 많은 웹 사이트에서는 일부 키 로깅 도구 및 트로이 목마에 의한 키 입력 캡처를 피하기 위해 로그인하고 비밀번호를 입력할 때 소프트 키보드를 사용합니다. 프로젝트에도 이 요구 사항이 있으므로 모든 사람과 공유하고 렌더링을 게시하겠습니다. . 관심 있는 친구들이 수집할 수 있습니다. . .. 기능이 좀 크고 숫자 키패드만 필요하다고 생각된다면 코드 단순화를 참고하시면 됩니다.
큰 키보드 다운로드: 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(); 
} 
var password; 
var CapsLockValue=; 
var checkSoftKey; 
함수 setVariables() { 
tablewidth=; 
테이블 높이=; 
if (navigator.appName == "Netscape") { 
horz=".left"; 
vert=".top"; 
docStyle="문서."; 
styleDoc=""; 
innerW="window.innerWidth"; 
innerH="window.innerHeight"; 
offsetX="window.pageXOffset"; 
offsetY="window.pageYOffset"; 
} 
else { 
horz=".pixelLeft"; 
vert=".pixelTop"; 
doc; 
styleDoc=".style"; 
innerW="document.body.clientWidth"; 
innerH="document.body.clientHeight"; 
offsetX="document.body.scrollLeft"; 
offsetY="document.body.scrollTop"; 
} 
} 
함수 checkLocation() { 
if (checkSoftKey) { 
objectXY="softkeyboard"; 
var availableX=eval(innerW); 
var availableY=eval(innerH); 
var currentX=eval(offsetX); 
var currentY=eval(offsetY); 
x=availableX-테이블 너비 currentX; 
y=현재Y; 
evalMove(); 
} 
setTimeout("checkLocation()",); 
} 
함수 evalMove() { 
eval(docStyle   objectXY   styleDoc   vert   "="   y); 
} 
self.onError=null; 
현재X = 현재Y =;   
whichIt = null;            
lastScrollX =; 마지막ScrollY =; 
NS = (document.layers) ? :: 
IE = (document.all) ?:; 
함수 heartBeat() { 
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } 
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } 
if(diffY != lastScrollY) { 
퍼센트 = . * (diffY - lastScrollY); 
if(퍼센트 >) 퍼센트 = Math.ceil(퍼센트); 
else 퍼센트 = Math.floor(퍼센트); 
if(IE) document.all.softkeyboard.style.pixelTop  = 퍼센트; 
if(NS) document.softkeyboard.top  = 퍼센트;  
lastScrollY = lastScrollY   퍼센트;} 
if(diffX != lastScrollX) { 
퍼센트 = . * (diffX - lastScrollX); 
if(퍼센트 >) 퍼센트 = Math.ceil(퍼센트); 
else 퍼센트 = Math.floor(퍼센트); 
if(IE) document.all.softkeyboard.style.pixelLeft  = 퍼센트; 
if(NS) document.softkeyboard.left  = 퍼센트; 
lastScrollX = lastScrollX   퍼센트;    }        } 
기능 checkFocus(x,y) {  
stalkerx = document.softkeyboard.pageX; 
스토커리 = document.softkeyboard.pageY; 
stalkerwidth = document.softkeyboard.clip.width; 
stalkerheight = document.softkeyboard.clip.height; 
if( (x > stalkerx && x  stalkery && y (stalkerytalkerheight))) return true; 
else return false;} 
function grabIt(e) { 
checkSoftKey = false; 
if(IE) { 
whichIt = event.srcElement; 
while (whichIt.id!=null&&whichIt.id.indexOf("softkeyboard") == -) { 
whichIt = whichIt.parentElement; 
if (whichIt == null) { return true; } } 
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;} } 
true를 반환합니다.    } 
function moveIt(e) { 
if (whichIt == null) { return false; } 
if(IE) { 
if(whichIt.style!=null){ 
newX = (event.clientX   document.body.scrollLeft); 
newY = (event.clientY   document.body.scrollTop); 
거리X = (newX - 현재X);    distanceY = (newY - 현재Y); 
현재X = newX;    currentY = newY; 
whichIt.style.pixelLeft  = distanceX; 
whichIt.style.pixelTop  = 거리Y; 
if(whichIt.style.pixelTop document.body.scrollTop; 
if(whichIt.style.pixelLeft document.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 if(whichIt.top 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 )-; 
false를 반환;} 
false를 반환;    } 
함수 dropIt() {whichIt = null; 
if(NS) window.releaseEvents(Event.MOUSEMOVE); 
true를 반환합니다.    } 
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;    } 
var style="";     
document.write(style);                                                                    

                                             
document.write("

style=\"position:absolute; left:px; top:px; width:px; z-index:;display:none\">id=\"CalcTable\" width=\"\" border=\"\" align=\"center\" cellpadding=\"\" cellspacing=\" 
\" bgcolor=\"\">align=\"center\">

class=\"table_title\"  align=\"right\" valign=\"middle\" bgcolor=\"\" style=\"cursor:  
default;height:\">name=action> 博客园 
  密码输入器 
               &n 
bsp      value=\"使用键盘输入\" bgtype=\"\" onclick=\"password.readOnly=;password.focus 
();closekeyboard();password.value='';\">

\" border=\"\" cellspacing=\"\" cellpadding=\"\">\n  
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  
\n\n\nnnnnnnnnnnnnnn nnnnnnnnnnnn\n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  
\n\n\n\n\n\n\n\n\n\n\n\n \n \n\n

\">

\">

\">

\">

\">

\">

\">

格\" onclick=\"setpassvalue();\"  onDblClick=\"setpassvalue();\"   style=\"width:px;height:px\"> \n

name=\"button_number\" value=\" \">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" value=" ">

name="button_number" type=button value=" ">

">

">

value=" q ">

value=" e ">

value=" t ">

value=" u ">

value=" o ">

\">

\">

onDblClick=\"capsLockText();setCapsLock();\" value=\"切换大/小写\"   style=\"width:px;\">

type=button value=\" a \">

type=button value=\" d \">

type=button value=\" g \">

type=button value=\" j \">

\">

name=\"button\" type=button value=\" : \">

value=\" " \">

type=button value=\" ' \">

type=button onclick=\"OverInput();\" value=\"   确定  \"   style=\"width:px;height:px;\">

value=\" x \">

value=\" v \">

value=\" n \">

value=\"

\">

type=button value=\" ? \">

type=button value=\" . \">

\">

"); 

함수 addValue(newValue) 
{ 
if (CapsLockValue==) 
{ 
var str=Calc.password.value; 
if(str .length{ 
Calc.password.value  = newValue; 
}             
if(str.length{ 
password.value =Calc.password.value; 
} 
} 
else 
{ 
var str=Calc.password.value; 
if(str.length{ 
//Calc.password.value  = newValue.toUpperCase(); 
Calc.password.value  = newValue; 
} 
if(str.length{ 
password.value=Calc.password.value; 
} 
} 
} 

function setpassvalue() 
{ 
var longnum=Calc.password .value.length; 
var num 
num=Calc.password.value.substr(,longnum-); 
Calc.password.value=num; 
var str=Calc.password.value ; 
password.value=Calc.password.value; 
} 

함수 OverInput() 
{ 
var str=Calc.password.value;
password.value =Calc.password.value;
closekeyboard();
Calc.password.value=""; 
password.readOnly=; 
} 

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

function showkeyboard() 
{ 
randomNumberButton(); 
var th = password; 
var ttop  = th.offsetTop; 
var thei  = th.clientHeight; 
var tleft = th.offsetLeft; 
var ttyp  = th.type; 
동안(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(); 
} 
} 

함수 setCapsLock() 
{ 
if (CapsLockValue==) 
{ 
CapsLockValue= 
} 
else  
{ 
CapsLockValue= 
} 
} 
함수 setCalcborder() 
{ 
CalcTable.style.border="px solid #BADF" 
} 
함수 setHead () 
{ 
CalcTable.cells[].style.BackgroundColor="#BADF"     
} 
함수 setCalcButtonBg() 
{ 
for(var i=;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"; 
} 
var str=Calc.elements[i].value; 
str=str.trim(); 
if(str.length==) 
{ 
} 
var thisButtonValue=Calc.elements[i].value; 
thisButtonValue=thisButtonValue.trim(); 
if(thisButtonValue.length==) 
{ 
Calc.elements[i].onclick= 
function () 
{ 
var thisButtonValue=this.value; 
thisButtonValue=thisButtonValue.trim(); 
thisButtonValue=jiamiMimaKey(thisButtonValue); 
addValue(thisButtonValue); 
} 
Calc.elements[i].ondblclick= 
함수 () 
{ 
var thisButtonValue=this.value; 
thisButtonValue=thisButtonValue.trim(); 
thisButtonValue=jiamiMimaKey(thisButtonValue); 
addValue(thisButtonValue); 
} 
} 
} 
} 
} 
function initCalc() 
{ 
setCalcborder(); 
setHead(); 
setCalcButtonBg(); 
} 
String.prototype.trim = function() 
{ 
return this.replace(/(^s*)|(s*$)/g, ""); 
} 
var capsLockFlag; 
capsLockFlag=true; 
함수 capsLockText() 
{ 
if(capsLockFlag) 
{ 
for(var i=;i{ 
var char =Calc.elements[i].값; 
var char=char.trim() 
if(Calc.elements[i].type=="button"&&char>="a"&&char { 
Calc.elements[i].value=" " String.fromCharCode(char.charCodeAt()-) " " 
} 
} 
} 
else 
{ 
for(var i=;i{ 
var char=Calc.elements[i].value; 
var char=char.trim() 
if(Calc.elements[i].type=="button"&&char>="A"&&char { 
Calc.elements[i].value=" " String.fromCharCode(char.charCodeAt() ) " " 
} 
} 
} 
capsLockFlag=!capsLockFlag; 
} 

function randomNumberButton(){ 
var a = new Array();   
a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[]=;a[ ]=; 
var randomNum; 
var times=; 
for(var i=;irandomNum = parseInt(Math.random()*); 
var tmp=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[] " "; 
} 

function hideSelect(){ 
var i=; 
while(idocument.getElementsByTagName("select")[i].style.visibility = "hidden"; 
나는=나 ; 
} 
} 

function unhideSelect(){ 
var i=; 
while(idocument.getElementsByTagName("select")[i].style.visibility = "visible"; 
나는=나 ; 
} 
} 


함수  jiamiMimaKey(newValue) { 
    if (typeof(b) == "정의되지 않음" || typeof(ifUseYinshe) == "정의되지 않음" || ifUseYinshe ==  
) {return newValue;} 
    var everyone = ''; 
    var afterPass = ''; 
    for (var i=;i            모든 사람 = newValue.charAt(i); 
           for (var j =;j                 if (모든 사람 == b[*j]) { 
                          afterPass = afterPass   b[*j ]; 
                           휴식; 
                   } 
            } 
        } 
        newValue= afterPass; 
        지아미 =; 
        Pass 후 반환; 
} 

  Default.aspx: 
Inherits="_Default" 
    ResponseEncoding= "GB" %> 

html PUBLIC "-//WC//DTD XHTML. Transitional//EN"  
"http://www.w.org/TR/xhtml/DTD/xhtml-transitional .dtd"> 
 
 
     
     
    <script></script> 
 
 
    

 
        

 
                   onblur="tipLogPwd.className='tip_off'" 
           onclick="password =this;showkeyboard();this.readOnly=;Calc.password.value=''" 
               style="width:px">