怎样用js模拟键盘事件

JavaScript021

怎样用js模拟键盘事件,第1张

1. IE下没什么问题,创建事件对象、对对象的keyCode属性赋值,然后再抛出来就行了:

2. Firefox 需要通过document.createEvent创建KeyEvents对象,再通过initKeyEvent方法对事件对象初始化

initKeyEvent 参考:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/initKeyEvent

3. Chrome/Safari/Opera

通过document.createEvent创建UIEvents对象,初始化后再在该对象上挂载按键值。

initUIEvent 参考:https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent

Chrome和Opera可以先将keyCode属性delete掉后,再用Object.defineProperty方法重新为它赋值:

有些安卓浏览器,此法无效,需要用下面的方式:

最后,封装好的function大概就是这样:

使用方法: 假设模拟回车

原理

用JS来点击按钮需要分2步,第一步是选中按钮的元素,第二步是使用元素自带的click函数。

例如接下来我将要演示的例子中,仅用

document.getElementById("btn").click()

一行就可以控制按钮点击。

其中document.getElementById("btn")是根究id获取按钮的元素,click()是使按钮被点击一次。

演示

这是我为此问题专门写的在线演示页面点击按钮演示页面。

页面结构如图

首先点击右下角打开控制台

然后输入

document.getElementById("btn").click()

这行代码

按回车运行代码即可弹出一行提示,说明按钮被点击。你可以用鼠标点击一下按钮,也是这个效果。

整段拿去试试,我试过了 没问题。

你那里报错是其他原因引起的

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<button type="submit" id="submitbtn" class="ui-button ui-button-lblue" seed="next-btn-pay-recommend">下一步</button>

<script>

    document.getElementById("submitbtn").onclick=function(){

        alert(123)

    }

    document.getElementById("submitbtn").click()

</script>

</html>

估计是这个原因:js写在按钮上边了

js先执行 document.getElementById("submitbtn")

对页面上的dom对象进行查找。而id为submitbtn的节点还没有在dom中生成所以 拿到了null这个对象,而null这个对象没有叫做click的属性。然后给你报个错。下边这样。