JS模拟键盘事件 -- 原理及小例子

浏览数：25 / 时间：2015年06月09日

小例子：

（Chrome下可用，其他浏览器未测试，使用新方法，暂不考虑兼容性）

代码如下：

 1 <input type="button" tabindex="-1" value="点点点点点" id="btn">
 2 <input type="text" placeholder="1">
 3 <input type="text" placeholder="2">
 4 <input type="text" placeholder="3">
 5 <input type="text" placeholder="4">
 6 <input type="text" placeholder="5">
 7 <input type="text" placeholder="6">
 8 <script>
 9 var nowEle=document;
10 var inputs=[].slice.call(document.querySelectorAll("[type=text]"));
11 inputs.forEach(function(el,i){
12     el.onfocus=function(){
13         nowEle=this;
14     };
15     /*el.onblur=function(){
16         setTimeout(function() {
17             nowEle=document;
18         }, 0);
19     };*/
20 });
21 btn.onclick=function(ev){
22     // console.log(nowEle);
23     var e=document.createEvent("KeyboardEvents");
24     e.initKeyboardEvent("keydown",true,true,window,"U+0009"); // tab
25     if(nowEle==inputs[inputs.length-1])nowEle=document;
26     nowEle.focus && nowEle.focus();
27     nowEle.dispatchEvent(e);
28     // console.log(e);
29 };
30 document.onkeydown=function(ev){
31     // console.log(ev.keyCode,ev.which,ev);
32 };
33 document.addEventListener("click",function(ev){
34     for (var i = 0; i < inputs.length; i++) {
35         if(inputs[i]==ev.target || btn==ev.target)return;
36     };
37     nowEle=document;
38 },false);
39 </script>