JS模拟键盘事件 -- 原理及小例子
提问：
键盘默认事件，比如tab切换，alt+f4关闭，ctrl+t新建等，如果不想通过键盘而是一些按钮点击来触发这些功能，该咋办呢？
例子：
先以tab为例上一个小例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>触发键盘默认事件</title>
</head>
<body>
<div>
<input type="button" tabindex="-1" value="点点点点点" id="btn">
<input type="text" placeholder="1">
<input type="text" placeholder="2">
<input type="text" placeholder="3">
<input type="text" placeholder="4">
<input type="text" placeholder="5">
<input type="text" placeholder="6">
</div>
<script>
// 当前获取焦点的元素
var nowEle=document;
// 需要焦点切换的元素
var inputs=[].slice.call(document.querySelectorAll("[type=text]"));
// 只添加获取焦点事件
// 放弃失去焦点事件 -- 需要判断失去后焦点被谁获得,太麻烦
inputs.forEach(function(el,i){
el.onfocus=function(){
nowEle=this;
};
/*el.onblur=function(){
setTimeout(function() {
nowEle=document;
}, 0);
};*/
});
// !!! 关键部分,事件模拟 !!!
btn.onclick=function(ev){
// console.log(nowEle);
var e=document.createEvent("KeyboardEvents");
e.initKeyboardEvent("keydown",true,true,window,"U+0009"); // tab
if(nowEle==inputs[inputs.length-1])nowEle=document;
nowEle.focus && nowEle.focus();
nowEle.dispatchEvent(e);
// console.log(e);
};
/*document.onkeydown=function(ev){
// console.log(ev.keyCode,ev.which,ev);
};*/
// input获取焦点:tab切换和鼠标点击
// 这里处理鼠标点击获取焦点
document.addEventListener("click",function(ev){
for (var i = 0; i < inputs.length; i++) {
if(inputs[i]==ev.target || btn==ev.target)return;
};
nowEle=document;
},false);
</script>
</body>
</html>
介绍：
实际效果：模拟tab事件在指定范围内移动焦点，点击按钮，使焦点在6个input标签里切换。
主逻辑为：通过键盘事件和点击事件（焦点的两种获取方式）找到当前获取焦点的元素，通过按钮点击来模拟键盘的tab按钮。
技术难点：键盘事件模拟，以及找到正确的事件触发者。
难点：
模拟键盘事件：
var e=document.createEvent("KeyboardEvents");
e.initKeyboardEvent("keydown",true,true,window,"U+0009"); // tab
if(nowEle==inputs[inputs.length-1])nowEle=document;
nowEle.focus && nowEle.focus();
nowEle.dispatchEvent(e);
1.document.createEvent
DOM3 新方法，创建事件，参考资料：浅谈Javascript事件模拟。
2.e.initKeyboardEvent
设置事件参数，参考资料：WebKit 内核浏览器 initKeyboardEvent 函数原型。
3.nowEle.dispatchEvent(e)
指定事件对象。
收获:
源自一个讨论群里的小问题，有点感兴趣就查了查，写了个小demo，看来JavaScript里还有很多东西要去挖掘，前端大路漫漫。
