首页 > 代码库 > JS模拟键盘事件 -- 原理及小例子

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

小例子:

(Chrome下可用,其他浏览器未测试,使用新方法,暂不考虑兼容性)

 
代码如下:
 1 <input type="button" tabindex="-1" value="http://www.mamicode.com/点点点点点" 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"); // tab25     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>

先点着试试。