JS模拟软键盘

原创 2007年09月23日 11:32:00
 

HTML Tags and JavaScript tutorial



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;" oncontextmenu="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>';
strHTML+='</tr></table></body></html>';
oPopUp.document.write(strHTML);
}
</script>
<input type="text" id="txtPwd" name="txtPwd" onclick="SoftKeyboard(this)" readonly="readonly">
 


Javascript实现的软键盘,效果不错

Javascript实现的软键盘,效果不错
  • java2000_net
  • java2000_net
  • 2011年03月10日 13:44
  • 6414

原生js创建虚拟数字键盘输入

使用google浏览器访问效果图如下:                        以下是index.html文档源码: 模拟数字键盘 ...
  • willamlan
  • willamlan
  • 2015年09月19日 23:08
  • 2129

js实现软键盘(兼容所有浏览器)

效果图如下: 代码如下:
  • xuweilinjijis
  • xuweilinjijis
  • 2013年03月18日 15:05
  • 5468

js虚拟软键盘

功能强大的JS虚拟键盘 最近做项目,我负责做网页前端,客户需要利用触摸屏进行操作,不外接鼠标键盘,但要求能录入文字,包括数字,英文,中文。思考了一下,决定用JS实现虚拟键盘。 ...
  • jr_soft
  • jr_soft
  • 2014年09月12日 12:10
  • 1306

js判断单击软键盘的“完成”按钮

转载地址:http://www.jianshu.com/p/e5d33721595d 最近公司有一个项目,要在页面中有一个搜索框,输入内容,单击软键盘上的搜索或完成来运行函数; 开始在想,有...
  • zhanlai_wei
  • zhanlai_wei
  • 2017年07月12日 18:54
  • 342

js 手机虚拟键盘控制

1. 通过输入框的focus,blur事件控制虚拟键盘的弹起消失 2. 通过 document.documentElement.clientHeight 获得页面高度。   在开始时虚拟键盘未弹起时计...
  • liyujia6636
  • liyujia6636
  • 2017年02月17日 20:59
  • 2456

H5页面关闭软键盘

H5页面关闭软键盘
  • songchunmin_
  • songchunmin_
  • 2016年07月04日 17:05
  • 13634

js模拟软键盘实现资料收集

  • Henry_zp
  • Henry_zp
  • 2010年03月27日 18:51
  • 837

JS实现自定义简单网页软键盘效果代码

自写一个简单点的网页软键盘 * { padding:0; margin:0; } body { background:#fff; } th, ...
  • paj123456789
  • paj123456789
  • 2017年07月20日 11:01
  • 397

JS 开启 win10 触屏键盘

1. 编辑注册表导入文件: tabkey.reg         Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\tab...
  • cnmqw
  • cnmqw
  • 2017年02月03日 01:31
  • 782
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS模拟软键盘
举报原因:
原因补充:

(最多只允许输入30个字)