js 浏览器支持的软键盘，随机排列（转）

效果图：

之前的版本是要在页面中分别添加js的引用，而且还要单独定义样式表，不方便批量调用

[html] view plaincopyprint?
 
  1. <style type="text/css">  
  2. .btn_letter {width:25px;BORDER: 1px solid #7b9ebd; PADDING: 1px 1px 0px 2px; FONT-SIZE: 14px; CURSOR: point;  height:20px; COLOR: #075bc3;font-family: Arial;}  
  3. .btn_num {width:25px;BORDER:1px solid #7ebf4f; PADDING: 1px 1px 0px 2px;FONT-SIZE: 12px; CURSOR: point; height:20px;COLOR: black; font-family: Arial;}  
  4. .btn_input {BORDER:1px solid #2C59AA; PADDING:2px 2px 0px 2px; FONT-SIZE:12px;CURSOR:pointer; COLOR:black; font-family: Arial;}  
  5. </style>  
  6. <script type="text/javascript" src="JustWalking.js"></script>  
  7. </head>  
  8. <body>  
  9. <div align="center" style="width:50%;height:600px; overflow:hidden;">  
  10.     <INPUT id="userPW" name="userPW" type="password" onfocus="softFn.pwInputFocus(this);" onchange="softFn.pwInputChange(this);"   
  11.     maxLength="20"  minLength="6" readOnly />  
  12. </div>  
  13. <script type="text/javascript" src="softKeyBoard.js"></script>  


修改后将样式表分别定义为style.css样式表，并且js动态调用，这样在页面中只需要引用一个js文件，样式表也不用另外调用

[html] view plaincopyprint?
 
    1. <INPUT id="userPWDSoftKey" name="userPW" type="password" maxLength="20"  minLength="6" readOnly />  
    2. <script type="text/javascript" src="softKeyBoard.js"></script>  
    3. <script type="text/javascript">  
    4.     initSoftKeyBoard("userPWDSoftKey");  
    5. </script>  

具体源代码可以在这里下载：http://download.csdn.net/detail/songylwq/4999645

posted on 2013-06-17 11:15  kangxuebin  阅读(398)  评论(0)    收藏  举报

导航