一个真正的网页软键盘

最新推荐文章于 2024-04-11 09:36:13 发布

zhangsir898

最新推荐文章于 2024-04-11 09:36:13 发布

阅读量1.3k

点赞数

文章标签： button function javascript null string table

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/zhangsir898/article/details/277910

版权

<script language=JavaScript type=text/JavaScript> </script> <script language=JavaScript1.2> CapsLock=0 var ns=(document.layers); var ie=(document.all); var w3=(document.getElementById && !ie); //显示软键盘 function show() {if(!ns && !ie && !w3) return; if(softkeybord.style.visibility == "hidden"){ softkeybord.style.visibility="visible"; }else{ softkeybord.style.visibility="hidden"; } } //设置大小写 function setCapsLock(obj) {if(!ns && !ie && !w3) return; if (CapsLock==0) { CapsLock=1 obj.value=" 大写 "; } else { CapsLock=0 obj.value=" 小写 "; } } //退格 function Backspace() {if(!ns && !ie && !w3) return; var long=form.pw.value.length; var value1 value1=form.pw.value.substr(0,long-1); form.pw.value=value1; } //输入字符 function addValue(Value) {if(!ns && !ie && !w3) return; if (CapsLock==0) { form.pw.value += Value; } else { form.pw.value += Value.toUpperCase(); } form.pw.value = form.pw.value.replace("^"," "); } </script>

::为了你密码的安全，请用软键盘输入密码！::

以下是原代码：

<head>
<style type="text/css">

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

<body onLoad="MM_dragLayer('softkeybord','',0,0,356,30,true,false,-1,-1,-1,-1,false,false,0,'',false,'')">
<table width="700" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v4.01
//Copyright 1998 Macromedia, Inc. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;
var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
retVal = true; if(IE && event) event.returnValue = true;
if (MM_dragLayer.arguments.length > 1) {
curDrag = MM_findObj(objName); if (!curDrag) return false;
if (!document.allLayers) { document.allLayers = new Array();
with (document) if (NS4) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
} else {
if (NS6) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div");
for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}
for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];
} }
curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
curDrag.MM_oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
if (String(curTop)=="NaN") curTop=0; curDrag.MM_startT = curTop;
curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;
curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop+cD;
curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
} else {
var theEvent = ((NS)?objName.type:event.type);
if (theEvent == 'mousedown') {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
var maxDragZ=null; document.MM_maxZ = 0;
for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (NS6) { parentLayer = aLayer.parentNode;
while (parentLayer != null && parentLayer.style.position) {
parentL += parseInt(parentLayer.offsetLeft); parentT += parseInt(parentLayer.offsetTop);
parentLayer = parentLayer.parentNode;
} } else if (IE) { parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement; } }
var tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+MM_hLeft);
var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop) +parentT)+MM_hTop);
if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS4)?clip.height:offsetHeight);
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
|| maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
if (curDrag) {
document.onmousemove = MM_dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {
eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.MM_maxZ+1');
if (!curDrag.MM_dropBack) document.MM_maxZ++; }
retVal = false; if(!NS4&&!NS6) event.returnValue = false;
} } else if (theEvent == 'mousemove') {
if (document.MM_curDrag) with (document.MM_curDrag) {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY;
if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);
if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);
MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
if (NS4) {left = newLeft; top = newTop;}
else if (NS6){style.left = newLeft; style.top = newTop;}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (MM_dragJS) eval(MM_dragJS);
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mouseup') {
document.onmousemove = null;
if (NS) document.releaseEvents(Event.MOUSEMOVE);
if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
if (document.MM_curDrag) with (document.MM_curDrag) {
if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
(Math.pow(MM_targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=MM_tol) {
if (NS4) {left = MM_targL; top = MM_targT;}
else if (NS6) {style.left = MM_targL; style.top = MM_targT;}
else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
if(MM_dropBack) {if (NS4) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
retVal = false; if(!NS) event.returnValue = false; }
document.MM_curDrag = null;
}
if (NS) document.routeEvent(objName);
} return retVal;
}
//-->
</script>
<script LANGUAGE="JavaScript1.2">
CapsLock=0
var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById && !ie);
//显示软键盘
function show()
{if(!ns && !ie && !w3) return;
if(softkeybord.style.visibility == "hidden"){
softkeybord.style.visibility="visible";
}else{
softkeybord.style.visibility="hidden";
}
}
//设置大小写
function setCapsLock(obj)
{if(!ns && !ie && !w3) return;
if (CapsLock==0)
{
CapsLock=1
obj.value=" 大写 ";
}
else
{
CapsLock=0
obj.value=" 小写 ";
}
}
//退格
function Backspace()
{if(!ns && !ie && !w3) return;
var long=form.pw.value.length;
var value1
value1=form.pw.value.substr(0,long-1);
form.pw.value=value1;
}
//输入字符
function addValue(Value)
{if(!ns && !ie && !w3) return;
if (CapsLock==0)
{
form.pw.value += Value;
}
else
{
form.pw.value += Value.toUpperCase();
}
form.pw.value = form.pw.value.replace("^"," ");
}
</script>
<div id="softkeybord" style="position:absolute; height:50px; width:350px; top:150px; left:200px;visibility:hidden;z-index:1;">
<table bordercolor="#804040" border="1" cellspacing="0" cellpadding="0" bgcolor="#804040">
<tr>
<td width="371" height="10" ><font color="#FFFFFF">::为了你密码的安全，请用软键盘输入密码！::</font></td>
<td width="30" align="right"><input type="button" name="Submit" value="╳" onClick="JavaScript:softkeybord.style.visibility='hidden';">
</td>
</tr>
<tr>
<td height="131" bgcolor="#FFFFFF" colspan="2">
<table border="0" width="100%">
<tr>
<td align="center"><table width="94%" align="left" cellpadding="0" cellspacing="0">
<tr>
<td><input name="button1" type=button οnclick=addValue('1') value=" 1 "></td>
<td><input name="button2" type=button onClick=addValue('2') value=" 2 "></td>
<td><input name="button3" type=button onClick=addValue('3') value=" 3 "></td>
<td><input name="button4" type=button onClick=addValue('4') value=" 4 "></td>
<td><input name="button5" type=button onClick=addValue('5') value=" 5 "></td>
<td><input name="button6" type=button onClick=addValue('6') value=" 6 "></td>
<td><input name="button7" type=button onClick=addValue('7') value=" 7 "></td>
<td><input name="button8" type=button onClick=addValue('8') value=" 8 "></td>
<td><input name="button9" type=button onClick=addValue('9') value=" 9 "></td>
<td><input name="button0" type=button onClick=addValue('0') value=" 0 "></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center"><table width="94%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><input name="buttonq" type=button οnclick=addValue('q') value=" Q "></td>
<td><input name="buttonw" type=button οnclick=addValue('w') value=" W "></td>
<td><input name="buttone" type=button οnclick=addValue('e') value=" E "></td>
<td><input name="buttonr" type=button οnclick=addValue('r') value=" R "></td>
<td><input name="buttont" type=button οnclick=addValue('t') value=" T "></td>
<td><input name="buttony" type=button οnclick=addValue('y') value=" Y "></td>
<td><input name="buttonu" type=button οnclick=addValue('u') value=" U "></td>
<td><input name="buttoni" type=button οnclick=addValue('i') value=" I "></td>
<td><input name="buttono" type=button οnclick=addValue('o') value=" O "></td>
<td><input name="buttonp" type=button οnclick=addValue('p') value=" P "></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center"><table width="92%" align="right" cellpadding="0" cellspacing="0">
<tr>
<td><input name="buttonqa" type=button οnclick=addValue('a') value=" A "></td>
<td><input name="buttonws" type=button οnclick=addValue('s') value=" S "></td>
<td><input name="buttoned" type=button οnclick=addValue('d') value=" D "></td>
<td><input name="buttonrf" type=button οnclick=addValue('f') value=" F "></td>
<td><input name="buttontg" type=button οnclick=addValue('g') value=" G "></td>
<td><input name="buttonyh" type=button οnclick=addValue('h') value=" H "></td>
<td><input name="buttonuj" type=button οnclick=addValue('j') value=" J "></td>
<td><input name="buttonik" type=button οnclick=addValue('k') value=" K "></td>
<td><input name="buttonol" type=button οnclick=addValue('l') value=" L "></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center"><table width="90%" align="right" cellpadding="0" cellspacing="0">
<tr>
<td><input name="buttonqaz" type=button οnclick=addValue('z') value=" Z "></td>
<td><input name="buttonwsx" type=button οnclick=addValue('x') value=" X "></td>
<td><input name="buttonedc" type=button οnclick=addValue('c') value=" C "></td>
<td><input name="buttonrfv" type=button οnclick=addValue('v') value=" V "></td>
<td><input name="buttontgb" type=button οnclick=addValue('b') value=" B "></td>
<td><input name="buttonyhn" type=button οnclick=addValue('n') value=" N "></td>
<td><input name="buttonujm" type=button οnclick=addValue('m') value=" M "></td>
<td><input type="button" name="Submit2" value=" Enter " onClick="JavaScript:softkeybord.style.visibility='hidden';"></td>
</tr>
</table></td>
</tr>
<tr>

<td align="center">
<table width="80%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">
<input name="CapsLock" type=button οnclick=setCapsLock(this) value=" 小写 ">
</div></td>
<td><div align="center">
<input name="space" type=button οnclick=addValue('^') value=" ">
</div></td>
<td><div align="center">
<input name="Backspace" type=button οnclick=Backspace() value="Backspace">
</div></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<form name="form" method="post" action="">
<div align="center">
<p>
<input type="password" name="pw" onClick=show()>
</p>
<p>
<input type="text" name="textfield2" onClick="JavaScript:softkeybord.style.visibility='hidden';">
</p>
</div>
</form>
</td>
</tr>
</table>
</body>

结束

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。