Js 소프트 키보드 구현(js 소스코드)_javascript 기술-JS 튜토리얼-php.cn

보안 고려 사항을 고려하여 많은 웹 사이트에서는 일부 키 로깅 도구 및 트로이 목마에 의한 키 입력 캡처를 피하기 위해 로그인하고 비밀번호를 입력할 때 소프트 키보드를 사용합니다. 프로젝트에도 이 요구 사항이 있으므로 모든 사람과 공유하고 렌더링을 게시하겠습니다. . 관심 있는 친구들이 수집할 수 있습니다. . .. 기능이 좀 크고 숫자 키패드만 필요하다고 생각된다면 코드 단순화를 참고하시면 됩니다.
큰 키보드 다운로드: 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

코드 복사 코드는 다음과 같습니다.

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" 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>