JS软键盘代码

页面代码如下：
  1 <HTML>
  2 <HEAD>
  3 <TITLE>一个不错的js软键盘代码</TITLE>
  4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5 </HEAD>
  6 <BODY>
  7 <script language="javascript" type="text/javascript"><!--
  8 //定义当前是否大写的状态
  9 window.onload=
 10  function()
 11  {
 12   password1=null;  
 13   initCalc();
 14  }
 15 var CapsLockValue=0;
 16 var check;
 17 function setVariables() {
 18 tablewidth=630;  // logo width, in pixels
 19 tableheight=20;  // logo height, in pixels
 20 if (navigator.appName == "Netscape") {
 21 horz=".left";
 22 vert=".top";
 23 docStyle="document.";
 24 styleDoc="";
 25 innerW="windows.innerWidth";
 26 innerH="windows.innerHeight";
 27 offsetX="window.pageXOffset";
 28 offsetY="window.pageYOffset";
 29 }
 30 else {
 31 horz=".pixelLeft";
 32 vert=".pixelTop";
 33 docStyle="";
 34 styleDoc=".style";
 35 innerW="document.body.clientWidth";
 36 innerH="document.body.clientHeight";
 37 offsetX="document.body.scrollLeft";
 38 offsetY="document.body.scrollTop";
 39    }
 40 }
 41 function checkLocation() {
 42 if (check) {
 43 objectXY="softkeyboard";
 44 var availableX=(innerW);
 45 var availableY=(innerH);
 46 var currentX=(offsetX);
 47 var currentY=(offsetY);
 48 x=availableX-tablewidth+currentX;
 49 //y=availableY-tableheight+currentY;
 50 y=currentY;
 51 Move();
 52 }
 53 setTimeout("checkLocation()",0);
 54 }
 55 function Move() {
 56 //(docStyle + objectXY + styleDoc + horz + "=" + x);
 57 (docStyle + objectXY + styleDoc + vert + "=" + y);
 58 }
 59 
 60  self.onError=null;
 61  currentX = currentY = 0; 
 62  whichIt = null;          
 63  lastScrollX = 0; lastScrollY = 0;
 64  NS = (document.layers) ? 1 : 0;
 65  IE = (document.all) ? 1: 0;
 66  function heartBeat() {
 67   if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
 68      if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
 69   if(diffY != lastScrollY) {
 70                  percent = .1 * (diffY - lastScrollY);
 71                  if(percent > 0) percent = Math.ceil(percent);
 72                  else percent = Math.floor(percent);
 73      if(IE) document.all.softkeyboard.style.pixelTop += percent;
 74      if(NS) document.softkeyboard.top += percent;
 75                  lastScrollY = lastScrollY + percent;}
 76   if(diffX != lastScrollX) {
 77    percent = .1 * (diffX - lastScrollX);
 78    if(percent > 0) percent = Math.ceil(percent);
 79    else percent = Math.floor(percent);
 80    if(IE) document.all.softkeyboard.style.pixelLeft += percent;
 81    if(NS) document.softkeyboard.left += percent;
 82    lastScrollX = lastScrollX + percent; }  }
 83  function checkFocus(x,y) {
 84          stalkerx = document.softkeyboard.pageX;
 85          stalkery = document.softkeyboard.pageY;
 86          stalkerwidth = document.softkeyboard.clip.width;
 87          stalkerheight = document.softkeyboard.clip.height;
 88          if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return
 89 true;
 90          else return false;}
 91  function grabIt(e) {
 92      check = false;
 93   if(IE) {
 94    whichIt = event.srcElement;
 95    while (whichIt.id.indexOf("softkeyboard") == -1) {
 96     whichIt = whichIt.parentElement;
 97     if (whichIt == null) { return true; } }
 98    whichIt.style.pixelLeft = whichIt.offsetLeft;
 99       whichIt.style.pixelTop = whichIt.offsetTop;
100    currentX = (event.clientX + document.body.scrollLeft);
101       currentY = (event.clientY + document.body.scrollTop);  
102   } else {
103          window.captureEvents(Event.MOUSEMOVE);
104          if(checkFocus (e.pageX,e.pageY)) {
105                  whichIt = document.softkeyboard;
106                  StalkerTouchedX = e.pageX-document.softkeyboard.pageX;
107                  StalkerTouchedY = e.pageY-document.softkeyboard.pageY;} }
108      return true; }
109  function moveIt(e) {
110   if (whichIt == null) { return false; }
111   if(IE) {
112       newX = (event.clientX + document.body.scrollLeft);
113       newY = (event.clientY + document.body.scrollTop);
114       distanceX = (newX - currentX);    distanceY = (newY - currentY);
115       currentX = newX;    currentY = newY;
116       whichIt.style.pixelLeft += distanceX;
117       whichIt.style.pixelTop += distanceY;
118    if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop =
119 document.body.scrollTop;
120    if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft =
121 document.body.scrollLeft;
122    if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft -
123 whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
124    if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop -
125 whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop -
126 whichIt.style.pixelHeight - 5;
127    event.returnValue = false;
128   } else {
129    whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
130          if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
131          if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
132          if( (whichIt.left + whichIt.clip.width) >= (windows.innerWidth+self.pageXOffset-17)) whichIt.left =
133 ((windows.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
134          if( (whichIt.top + whichIt.clip.height) >= (windows.innerHeight+self.pageYOffset-17)) whichIt.top =
135 ((windows.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
136          return false;}
137      return false; }
138  function dropIt() {whichIt = null;
139      if(NS) window.releaseEvents (Event.MOUSEMOVE);
140      return true; }
141  if(NS) {window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
142   window.onmousedown = grabIt;
143    window.onmousemove = moveIt;
144   window.onmouseup = dropIt; }
145  if(IE) {
146   document.onmousedown = grabIt;
147    document.onmousemove = moveIt;
148   document.onmouseup = dropIt; }
149 // if(NS || IE) action = window.setInterval("heartBeat()",1);
150  
151  document.write("<DIV align=center id="softkeyboard" name="softkeyboard" style="position:absolute; left:0px;
152 top:0px; 500px; z-index:180;display:none">  <table id="CalcTable" width="" border="0" align="center"
153 cellpadding="0" cellspacing="0" bgcolor="">           <FORM id=Calc name=Calc action="" method=post
154 autocomplete="off">       <tr> <td title="尊敬的客户：为了保证密码安全,建议使用密码输入器输入密码!" align="right"
155 valign="middle" bgcolor="" style="cursor: default;height:30"> <INPUT type=hidden value="" name=password>  <INPUT
156 type=hidden value=ok name=action2>&nbsp<font style="font-size:13px;">为了密码安全,请使用密码输入器输入密码
157 </font>&nbsp;&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp&nbsp;<INPUT
158 style="100px;height:20px;background-color:#54BAF1;" type=button value="使用键盘输入" bgtype="1"
159 onclick="password1.readOnly=0;password1.focus();softkeyboard.style.display='none';password1.value='';"><span
160 style="2px;"></span></td>      </tr>      <tr align="center">         <td align="center" bgcolor="#FFFFFF">
161 <table align="center" width="%" border="0" cellspacing="1" cellpadding="0">
          <tr align="left"
162 valign="middle"> 
            <td> <input type=button value=" ~ "></td>
            <td> <input type=button value=" !
163 "></td>
            <td> <input type=button  value=" @ "></td>
            <td> <input type=button value=" # "></td>

164            <td> <input type=button value=" $ "></td>
            <td> <input type=button value=" % "></td>
           
165 <td> <input type=button value=" ^ "></td>
            <td> <input type=button value=" & "></td>
            <td> <input
166 type=button value=" * "></td>
            <td> <input type=button value=" ( "></td>
            <td> <input type=button
167 value=" ) "></td>
            <td> <input type=button value=" _ "></td>
            <td> <input type=button value=" +
168 "></td>
            <td> <input type=button value=" | "></td>
            <td colspan="1" rowspan="2"> <input
169 name="button10" type=button value=" 退格" onclick="setpassvalue();"  onDblClick="setpassvalue();"
170 style="100px;height:42px"> 
            </td>
          </tr>
          <tr align="left" valign="middle"> 
  
171          <td> <input type=button value=" ` "></td>
            <td> <input type=button value=" 1 "></td>
           
172 <td> <input type=button value=" 2 "></td>
            <td> <input type=button value=" 3 "></td>
            <td> <input
173 type=button value=" 4 "></td>
            <td> <input type=button value=" 5 "></td>
            <td> <input type=button
174 value=" 6 "></td>
            <td> <input type=button value=" 7 "></td>
            <td> <input type=button value=" 8
175 "></td>
            <td> <input type=button value=" 9 "></td>
            <td> <input name="button6" type=button
176 value=" 0 "></td>
            <td> <input type=button value=" - "></td>
            <td> <input type=button value=" =
177 "></td>
            <td> <input type=button value=" \ "></td>
            <td> </td>
          </tr>
          <tr
178 align="left" valign="middle"> 
            <td> <input type=button value=" q "></td>
            <td> <input
179 type=button value=" w "></td>
            <td> <input type=button value=" e "></td>
            <td> <input type=button
180 value=" r "></td>
            <td> <input type=button value=" t "></td>
            <td> <input type=button value=" y
181 "></td>
            <td> <input type=button value=" u "></td>
            <td> <input type=button value=" i "></td>
 
182           <td> <input type=button value=" o "></td>
            <td> <input name="button8" type=button value=" p
183 "></td>
            <td> <input name="button9" type=button value=" { "></td>
            <td> <input type=button
184 value=" } "></td>
            <td> <input type=button value=" [ "></td>
            <td> <input type=button value=" ]
185 "></td>
            <td><input name="button9" type=button onClick="capsLockText();setCapsLock();" 
186 onDblClick="capsLockText();setCapsLock();" value="切换大/小写" style="100px;"></td>
          </tr>
         
187 <tr align="left" valign="middle"> 
            <td> <input type=button value=" a "></td>
            <td> <input
188 type=button value=" s "></td>
            <td> <input type=button value=" d "></td>
            <td> <input type=button
189 value=" f "></td>
            <td> <input type=button value=" g "></td>
            <td> <input type=button value=" h
190 "></td>
            <td> <input type=button value=" j "></td>
            <td> <input name="button3" type=button
191 value=" k "></td>
            <td> <input name="button4" type=button value=" l "></td>
            <td> <input
192 name="button5" type=button value=" : "></td>
            <td> <input name="button7" type=button value=" &quot;
193 "></td>
            <td> <input type=button value=" ; "></td>
            <td> <input type=button value=" ' "></td>
 
194           <td rowspan="2" colspan="2"> <input name="button12" type=button onclick="OverInput();" value="   确定  "
195 style="130px;height:42"></td>
          </tr>
          <tr align="left" valign="middle"> 
            <td>
196 <input name="button2" type=button value=" z "></td>
            <td> <input type=button value=" x "></td>
           
197 <td> <input type=button value=" c "></td>
            <td> <input type=button value=" v "></td>
            <td> <input
198 type=button value=" b "></td>
            <td> <input type=button value=" n "></td>
            <td> <input type=button
199 value=" m "></td>
            <td> <input type=button value=" &lt; "></td>
            <td> <input type=button value="
200 &gt; "></td>
            <td> <input type=button value=" ? "></td>
            <td> <input type=button value=" ,
201 "></td>
            <td> <input type=button value=" . "></td>
            <td> <input type=button value=" / "></td>
 
202         </tr>
        </table></td>    </FORM>      </tr>  </table></DIV>")
203 //给输入的密码框添加新值
204  function addValue(newValue)
205  {
206   if (CapsLockValue==0)
207   {
208    var str=Calc.password.value;
209    if(str.length<password1.maxLength)
210    {
211     Calc.password.value += newValue;
212    }   
213    if(str.length<=password1.maxLength)
214    {
215     password1.value=Calc.password.value;
216    }
217   }
218   else
219   {
220    var str=Calc.password.value;
221    if(str.length<password1.maxLength)
222    {
223     Calc.password.value += newValue.toUpperCase();
224    }
225    if(str.length<=password1.maxLength)
226    {
227     password1.value=Calc.password.value;
228    }
229   }
230  }
231 //实现BackSpace键的功能
232  function setpassvalue()
233  {
234   var longnum=Calc.password.value.length;
235   var num
236   num=Calc.password.value.substr(0,longnum-1);
237   Calc.password.value=num;
238   var str=Calc.password.value;
239    password1.value=Calc.password.value;
240  }
241 //输入完毕
242  function OverInput()
243  {
244   //m_pass.mempass.value=Calc.password.value;
245   var str=Calc.password.value;
246    password1.value=Calc.password.value;
247    //alert(theForm.value);
248   //theForm.value=m_pass.mempass.value;
249   softkeyboard.style.display="none";
250   Calc.password.value="";
251   password1.readOnly=1;
252   //password1.value=Calc.password.value;
253  }
254 //关闭软键盘
255  function closekeyboard(theForm)
256  {
257   //("var theForm="+theForm+";");
258   //theForm.value="";
259   softkeyboard.style.display="none";
260   //Calc.password.value="";
261  }
262 //显示软键盘
263  function showkeyboard()
264  {
265   if(event.y+140)
266   softkeyboard.style.top=event.y+document.body.scrollTop+15;
267   if((event.x-250)>0)
268   {
269    softkeyboard.style.left=event.x-250;
270   }
271   else
272   {
273    softkeyboard.style.left=0;
274   }
275   
276   softkeyboard.style.display="block";
277   password1.readOnly=1;
278   password1.blur();
279   //password1.value="";
280  }
281 //设置是否大写的值
282 function setCapsLock()
283 {
284  if (CapsLockValue==0)
285  {
286   CapsLockValue=1
287 //  Calc.showCapsLockValue.value="当前是大写 ";
288  }
289  else
290  {
291   CapsLockValue=0
292 //  Calc.showCapsLockValue.value="当前是小写 ";
293  }
294 }
295 
296 function setCalcborder()
297 {
298  CalcTable.style.border="1px solid #0090FD"
299 }
300 function setHead()
301 {
302  CalcTable.cells[0].style.backgroundColor="#7EDEFF" 
303 }
304 function setCalcButtonBg()
305 {
306  for(var i=0;i<Calc.elements.length;i++)
307  {
308   if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="1")
309   {
310  //  if(i==10)
311 // alert(123);
312    Calc.elements[i].style.borderTopWidth= 0
313    Calc.elements[i].style.borderRightWidth= 2
314    Calc.elements[i].style.borderBottomWidth= 2
315    Calc.elements[i].style.borderLeftWidth= 0
316    Calc.elements[i].style.borderTopStyle= "none";
317    Calc.elements[i].style.borderRightStyle= "solid";
318    Calc.elements[i].style.borderBottomStyle= "solid";
319    Calc.elements[i].style.borderLeftStyle= "none";
320    //#46AC17
321    Calc.elements[i].style.borderTopColor= "#118ACC";
322    Calc.elements[i].style.borderRightColor= "#118ACC";
323    Calc.elements[i].style.borderBottomColor= "#118ACC";
324    Calc.elements[i].style.borderLeftColor= "#118ACC";
325    //#CBF3B2
326    Calc.elements[i].style.backgroundColor="#ADDEF8";
327    
328    
329    var str1=Calc.elements[i].value;
330    str1=str1.trim();
331    
332    if(str1.length==1)
333    {
334     //Calc.elements[i].style.fontSize=16;
335     //Calc.elements[i].style.fontWeight='bold';
336    }
337    
338    var thisButtonValue=Calc.elements[i].value;
339    thisButtonValue=thisButtonValue.trim();
340    if(thisButtonValue.length==1)
341    {
342     Calc.elements[i].onclick=
343      function ()
344      {
345       var thisButtonValue=this.value;
346       thisButtonValue=thisButtonValue.trim();
347       addValue(thisButtonValue);
348       //alert(234)
349      }
350     Calc.elements[i].ondblclick=
351      function ()
352      {
353       var thisButtonValue=this.value;
354       thisButtonValue=thisButtonValue.trim();
355       addValue(thisButtonValue);
356       //alert(234)
357      }
358    }
359    
360   }
361  }
362 }
363 function initCalc()
364 {
365  setCalcborder();
366  setHead();
367  setCalcButtonBg();
368 }
369 String.prototype.trim = function()
370 {
371     // 用正则表达式将前后空格
372     // 用空字符串替代。
373     return this.replace(/(^s*)|(s*$)/g, "");
374 }
375 var capsLockFlag;
376 capsLockFlag=true;
377 function capsLockText()
378 {
379 if(capsLockFlag)//改成大写
380 {
381  for(var i=0;i<Calc.elements.length;i++)
382  {
383    var char=Calc.elements[i].value;
384    var char=char.trim()
385   if(Calc.elements[i].type=="button"&&char>="a"&&char<="z"&&char.length==1)
386   {
387   
388    Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)-32)+" "
389   }
390  }
391 }
392 else
393 {
394  for(var i=0;i<Calc.elements.length;i++)
395  {
396    var char=Calc.elements[i].value;
397    var char=char.trim()
398   if(Calc.elements[i].type=="button"&&char>="A"&&char<="Z"&&char.length==1)
399   {
400   
401    Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)+32)+" "
402   }
403  }
404 }
405 capsLockFlag=!capsLockFlag;
406 }
407 //-->
408 </script>
409 <script>
410 //定义当前需用软键盘的表单和控件的名称
411 var curEditName
412 curEditName="form1.Password"
413 </script>
414 <form name="form1" method="post" action="">
415 <table border="0" width="250" cellspacing="0" cellpadding="2">
416 <tr>
417 <td width="100%" align="right" nowrap class="cn90">输入：
418 <input id="Password1" type="text" name="Password1" size="14" class="input" tabindex="1"
419 onKeyDown="Calc.password.value=this.value" onChange="Calc.password.value=this.value" onclick= "password1=this;showkeyboard
420 ();this.readOnly=1;Calc.password.value=''">
421 </td>
422 <td width="50%" class="cn90" nowrap><a onClick="showkeyboard(curEditName)" style={cursor:hand;}><font color="#0000CC">使用软
423 键盘</font></a></td>
424 </tr>
425 </table>
426 </form>
427 </BODY>
428 </HTML>
效果图片：