JavaScript实现动态网页键盘，无需下载

分类： javascript 项目点滴 2011-08-24 14:17 34人阅读 评论(0) 收藏 举报 
/*JS键盘
*实现大小写切换,使用时需指定页面上出现的位置,及接收输入的控件名称.
*边框文字样式需在css中指定.
*div1:出现的位置控件名称
*div2:接收输入的控件名称
*/
var shift=false;//shift开关
var caps=false;//caps开关
var nowchar,nownum;
var i;
var upcolor="#cfffff";//caps,shift按下抬起颜色
var downcolor="#5fffff";


function createKeyBoard(div1,div2){
//为了赋值和取值方便，定义数组
var valuechar1=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");
var valuechar2=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");
var valuenum1=new Array("1","2","3","4","5","6","7","8","9","0");
var valuenum2=new Array("!","@","#","$","%","^","&","*","(",")");
//创建表格
var otable=document.createElement("table");
otable.style.border="1px solid green";
otable.setAttribute("width","340");
otable.setAttribute("height", "60");
var otbody=document.createElement("tbody");
otable.appendChild(otbody); 

//加入第一行

otbody.insertRow(0);

//闭包函数,以防止无法在循环中定义值i
function tt(p,now) {
   this.click=function(){
    document.getElementById(div2).value+=now[p];
   }
}

//判断开关情况决定显示字符
if((shift==true&&caps==true)||(shift==false&&caps==false)){
   nowchar=valuechar1;
}else{
   nowchar=valuechar2;
}
if(shift==false){
   nownum=valuenum1;
}else{
   nownum=valuenum2;
}


for(i=0;i<14;i++){
   otbody.rows[0].insertCell(i);
   otbody.rows[0].cells[i].innerText=nowchar[i];
   var col=new tt(i,nowchar);
   otbody.rows[0].cells[i].attachEvent("onclick",col.click);
}
//加入第二行
otbody.insertRow(1);