软键盘的实现

最新推荐文章于 2024-10-02 05:39:15 发布

weixin_30500473

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量78

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Lewis/archive/2006/07/14/451007.html

版权

今天从CSDN上看到这段JS代码，感觉很不错，故收藏，拿出来供大家一起学习...

< script language = " javascript " >

// more javascript from http://www.smallrain.net

var oPopUp = null ;

function SoftKeyboard(pwdObj)

{

oPopUp=window.createPopup();

var popBody=oPopUp.document.body;

popBody.style.backgroundColor = "#FFFF99";

popBody.style.border = "solid black 1px";

WriteToPopup(oPopUp,pwdObj);

oPopUp.show(0,22,240,100,pwdObj);

}

function WriteToPopup(oPopUp,pwdObj)

{

var strHTML="<html><head>";

strHTML+='<meta http-equiv="Content-Type" content="text/html; charset=gb2312">';

strHTML+='<style type="text/css">';

strHTML+='.td

{text-align:center; background-color:#FFFF99; vertical-align:middle;font-size:13px;background-Image:(url:bg.gif); font-weight:800}';

strHTML+='.button

{border:0;width:90%; height:95%;}';

strHTML+='</style>';

strHTML+='<script language="javascript">';

strHTML+='var arrLow=new Array("`","1","2","3","4","5","6","7","8","9","0","-","=","\","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","[","]",";","\'",",",".","/","");';

strHTML+='var arrUp =new Array("~","!","@","#","$","%","^","&","*","(",")","_","+","|","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","{","}",":","\\"","<",">","?",""); ';

strHTML+='var curOverTd=null; var curClkTd=null; var CapsStatus="black";';

strHTML+='var pwdObjectId=parent.document.getElementById("'+pwdObj.id+'");';

strHTML+='function TdMouseOver(TdObj){ ';

strHTML+='TdObj.style.backgroundColor="blue"; ';

strHTML+=' TdObj.style.color="white";';

strHTML+='curOverTd=TdObj;} ';

strHTML+='function TdMouseOut(TdObj){ ';

strHTML+='if(curClkTd==TdObj){ ';

strHTML+='TdObj.style.backgroundColor="red"; ';

strHTML+='TdObj.style.color="white"; ';

strHTML+='}else{ ';

strHTML+='TdObj.style.backgroundColor="#FFFF99"; ';

strHTML+='TdObj.style.color="black"; }';

strHTML+='} ';

strHTML+='function TdMouseClk(TdObj){ ';

strHTML+='if(curClkTd){ ';

strHTML+='curClkTd.style.backgroundColor="#FFFF99"; ';

strHTML+='curClkTd.style.color="black"; }';

strHTML+='TdObj.style.backgroundColor="red"; ';

strHTML+=' TdObj.style.color="white";';

strHTML+='curClkTd=TdObj; ';

strHTML+='curOverTd=null; ';

strHTML+=' pwdObjectId.value+=TdObj.innerText;';

strHTML+=' }';

strHTML+=' function btnCapsDown(btnObj){';

strHTML+='if(CapsStatus=="black"){ CapsStatus="green"; ChgText(arrUp);}';

strHTML+='else{ CapsStatus="black"; ChgText(arrLow);}; ';

strHTML+='btnObj.style.color=CapsStatus=="black"?"#000000":"#33FF66";';

strHTML+=' }';

strHTML+=' function ChgText(arr){';

strHTML+='var table=document.getElementById("tbKeyboard");';

strHTML+='for(var i=0;i<4;i++)';

strHTML+='for(var j=0;j<12;j++)';

strHTML+='table.rows[i].cells[j].innerText=arr[12*i+j];';

strHTML+=' }';

strHTML+=' function btnSpaceDown(){';

strHTML+='pwdObjectId.value+=" "';

strHTML+=' }';

strHTML+=' function btnBackDown(){';

strHTML+='pwdObjectId.value=pwdObjectId.value.substring(0,pwdObjectId.value.length-1)';

strHTML+=' }';

strHTML+=' function btnEnterDown(){';

strHTML+='parent.oPopUp.hide();';

strHTML+=' }';

strHTML+='</scr'+'ipt></head> ';

strHTML+='<body bgcolor="#FFFFFF" style="margin:0; border:0;overflow:hidden;" οncοntextmenu="javascript:event.returnValue=false;" onselectstart="javascript:event.returnValue=false;"> ';

strHTML+='<table id="tbKeyboard" cellpadding="0" cellspacing="0" border="1" style="TABLE-LAYOUT: fixed; width:100%;height:100%; border-collapse:collapse; cursor:default" bordercolor="#111111">';

var arr=new Array("`","1","2","3","4","5","6","7","8","9","0","-","=","\\","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","[","]",";","\'",",",".","/","");

for(var i=0;i<4;i++){

strHTML+='<tr height="12">';

for(var j=0;j<12;j++)

strHTML+='<td class="td" valign="middle" onMouseOver="TdMouseOver(this)" onMouseOut="TdMouseOut(this)" onClick="TdMouseClk(this)">'+arr[i*12+j]+'</td>';

strHTML+='</tr">';

}

strHTML += ' < tr height = " 12 " >< td class = " td " colspan = " 12 " >< table width = " 100% " border = " 0 " cellpadding = " 0 " cellspacing = " 0 " style = " margin:0 " > ';

strHTML += ' < tr >< td class = " td " width = " 20% " valign = " middle " >< input type = " button " value = " Shift " style = " font-weight:800 " onclick = " btnCapsDown(this) " class = " button " ></ td > ';

strHTML += ' < td class = " td " width = " 35% " valign = " middle " >< input type = " button " value = " Space " onclick = " btnSpaceDown() " class = " button " ></ td > ';

strHTML += ' < td class = " td " width = " 25% " valign = " middle " >< input type = " button " value = " Back " onclick = " btnBackDown() " class = " button " ></ td > ';

strHTML += ' < td class = " td " width = " 20% " valign = " middle " >< input type = " button " value = " Enter " onclick = " btnEnterDown() " class = " button " ></ td > ';

strHTML += ' </ tr ></ table ></ td > ';