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

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

[javascript] view plain copy print ?

1. <A title="软键盘" onClick="_softkeyboard_(document.getElementById('password'),window.top.document.getElementById('skb'));document.getElementById('password').focus();">软键盘</A>  
2. <DIV id=skb style="BORDER: #dbe1e6 1px solid; PADDING: 4px; DISPLAY: none;  Z-INDEX: 99; background-color:#F4FBFF; LEFT: 20px;  WIDTH: 500px;  POSITION: absolute; TOP: 35px; TEXT-ALIGN: center"></DIV>  
3. <input name="password" type="password" id="password" class="kinput"/>  
4.    
5. <SCRIPT type=text/javascript>   
6.     function _softkeyboard_(target,container){  
7.         var _ = _softkeyboard_;  
8.         _.target = target;  
9.         _.doc = container.ownerDocument;  
10.         (_.doc.parentWindow||_.doc.defaultView)._softkeyboard_ = _softkeyboard_;  
11.         _.skb = container;  
12.         _.skb.innerHTML = _.getkeyshtml();  
13.         var toggle = (_.skb.style.display == "block");  
14.         _.skb.style.display = toggle ? "none" : "block";  
15.         _.preventKey(target);  
16.         return toggle;  
17.     }  
18.    
19.     function closeKeyBoard()  
20.     {  
21.         document.getElementById('skb').style.display = "none";  
22.     }  
23.    
24.     _softkeyboard_.shifted = true;  
25.     _softkeyboard_.getkeyshtml = function(shifted){  
26.         var htm = [], keys = _softkeyboard_.shifted ?   
27.             ["`1234567890-=","backspace","<br/>"," ","qwertyuiop[]//","<br/>"," "," ","asdfghjkl;","'","<br/>","shift","zxcvbnm,./","shift"] :   
28.             ["~!@#$%^&*()_+","backspace","<br/>"," ","QWERTYUIOP{}|","<br/>"," "," ","ASDFGHJKL:",'"',"<br/>","shift","ZXCVBNM<>?","shift"];  
29.         var esp = {  
30.                 "'":'<input type="button" value="/'" οnclick="_softkeyboard_.onkeydown(this);" />',  
31.                 '"':"<input type='button' value='/"' οnclick='_softkeyboard_.onkeydown(this);' />",  
32.                 "<br/>":"<br/>",  
33.                 " ":" ",  
34.                 "backspace":'<input type="button" value="<-" οnclick="_softkeyboard_.backspace();" />',  
35.                 "shift":'<input type="button" style="width:50px;" value="shift" οnclick="_softkeyboard_.shifted=!_softkeyboard_.shifted;_softkeyboard_.skb.innerHTML = _softkeyboard_.getkeyshtml();" />'  
36.         };  
37.         for(var j = 0; j < keys.length; j++){  
38.             if(esp[keys[j]]){  
39.                 htm.push(esp[keys[j]]);  
40.             }  
41.             else{  
42.                 var x = new Date().getMilliseconds()%keys[j].length;  
43.                 keys[j] =  keys[j].substr(x,keys[j].length) + keys[j].substr(0,x);  
44.                 for(var i = 0; i < keys[j].length; i++){   
45.                     htm.push("<input type='button' class='key' value='"+ keys[j].charAt(i)+"' οnclick='_softkeyboard_.onkeydown(this);' />");  
46.                 }  
47.             }  
48.         }  
49.         htm.push("<div style="margin-top:5px;" mce_style="margin-top:5px;"><input type='button' οnclick='closeKeyBoard()' value='确定' style="margin-right:20px;" mce_style="margin-right:20px;" /><input type='button' οnclick='closeKeyBoard()' value='关闭' /><div/>");  
50.         return htm.join("");  
51.     }  
52.     _softkeyboard_.onkeydown = function(ele){  
53.         _softkeyboard_.target.value += ele.value;  
54.         _softkeyboard_.target.focus();  
55.     }  
56.     _softkeyboard_.backspace = function(){  
57.         with(_softkeyboard_.target){  
58.             value = value.substr(0,value.length-1);  
59.         }  
60.     }  
61.     _softkeyboard_.addCSSRule = function(key,value){}  
62.     _softkeyboard_.hide = function(){  
63.         if(_softkeyboard_.skb){  
64.             _softkeyboard_.skb.style.display = "none"  
65.         }  
66.     }  
67.     _softkeyboard_.preventKey = function(target){  
68.         var targetkeydown = function(e){  
69.             e = window.event?window.event:e;  
70.             switch(e.keyCode){  
71.                 case 27://esc  
72.                 case 9://tab  
73.                     _softkeyboard_.hide();  
74.                     if(window.event){e.returnValue = false;}else{e.preventDefault();}break;  
75.             }  
76.         };  
77.         //target.addEventListener ? target.addEventListener("keydown",targetkeydown,false) : target.attachEvent("onkeydown",targetkeydown);  
78.     }  
79.    
80.     window.top._softkeyboard_=_softkeyboard_;  
81.     _softkeyboard_.preventKey(window.top.document.body);  
82.    
83. </SCRIPT>   

<A title="软键盘" onClick="_softkeyboard_(document.getElementById('password'),window.top.document.getElementById('skb'));document.getElementById('password').focus();">软键盘</A><DIV id=skb style="BORDER: #dbe1e6 1px solid; PADDING: 4px; DISPLAY: none;  Z-INDEX: 99; background-color:#F4FBFF; LEFT: 20px;  WIDTH: 500px;  POSITION: absolute; TOP: 35px; TEXT-ALIGN: center"></DIV><input name="password" type="password" id="password" class="kinput"/> <SCRIPT type=text/javascript>  function _softkeyboard_(target,container){  var _ = _softkeyboard_;  _.target = target;  _.doc = container.ownerDocument;  (_.doc.parentWindow||_.doc.defaultView)._softkeyboard_ = _softkeyboard_;  _.skb = container;  _.skb.innerHTML = _.getkeyshtml();  var toggle = (_.skb.style.display == "block");  _.skb.style.display = toggle ? "none" : "block";  _.preventKey(target);  return toggle; }  function closeKeyBoard() {  document.getElementById('skb').style.display = "none"; }  _softkeyboard_.shifted = true; _softkeyboard_.getkeyshtml = function(shifted){  var htm = [], keys = _softkeyboard_.shifted ?    ["`1234567890-=","backspace","<br/>"," ","qwertyuiop[]//","<br/>"," "," ","asdfghjkl;","'","<br/>","shift","zxcvbnm,./","shift"] :    ["~!@#$%^&*()_+","backspace","<br/>"," ","QWERTYUIOP{}|","<br/>"," "," ","ASDFGHJKL:",'"',"<br/>","shift","ZXCVBNM<>?","shift"];  var esp = {    "'":'<input type="button" value="/'" οnclick="_softkeyboard_.onkeydown(this);" />',    '"':"<input type='button' value='/"' οnclick='_softkeyboard_.onkeydown(this);' />",    "<br/>":"<br/>",    " ":" ",    "backspace":'<input type="button" value="<-" οnclick="_softkeyboard_.backspace();" />',    "shift":'<input type="button" style="width:50px;" value="shift" οnclick="_softkeyboard_.shifted=!_softkeyboard_.shifted;_softkeyboard_.skb.innerHTML = _softkeyboard_.getkeyshtml();" />'  };  for(var j = 0; j < keys.length; j++){   if(esp[keys[j]]){    htm.push(esp[keys[j]]);   }   else{    var x = new Date().getMilliseconds()%keys[j].length;    keys[j] =  keys[j].substr(x,keys[j].length) + keys[j].substr(0,x);    for(var i = 0; i < keys[j].length; i++){      htm.push("<input type='button' class='key' value='"+ keys[j].charAt(i)+"' οnclick='_softkeyboard_.onkeydown(this);' />");    }   }  }  htm.push("<div style="margin-top:5px;" mce_style="margin-top:5px;"><input type='button' οnclick='closeKeyBoard()' value='确定' style="margin-right:20px;" mce_style="margin-right:20px;" /><input type='button' οnclick='closeKeyBoard()' value='关闭' /><div/>");  return htm.join(""); } _softkeyboard_.onkeydown = function(ele){  _softkeyboard_.target.value += ele.value;  _softkeyboard_.target.focus(); } _softkeyboard_.backspace = function(){  with(_softkeyboard_.target){   value = value.substr(0,value.length-1);  } } _softkeyboard_.addCSSRule = function(key,value){} _softkeyboard_.hide = function(){  if(_softkeyboard_.skb){   _softkeyboard_.skb.style.display = "none"  } } _softkeyboard_.preventKey = function(target){  var targetkeydown = function(e){   e = window.event?window.event:e;   switch(e.keyCode){    case 27://esc    case 9://tab     _softkeyboard_.hide();     if(window.event){e.returnValue = false;}else{e.preventDefault();}break;   }  };  //target.addEventListener ? target.addEventListener("keydown",targetkeydown,false) : target.attachEvent("onkeydown",targetkeydown); }  window.top._softkeyboard_=_softkeyboard_; _softkeyboard_.preventKey(window.top.document.body); </SCRIPT>  

           

给我老师的人工智能教程打call！http://blog.youkuaiyun.com/jiangjunshow