关于Google Chrome：如何使用JavaScript模拟按键或点击？ |
您所在的位置：网站首页 › 谷歌模拟手机没有鼠标怎么办 › 关于Google Chrome：如何使用JavaScript模拟按键或点击？ |
|
我写了一个Google Chrome扩展程序，要在其上使用扩展程序的网站要求我单击或制表到文本框(因为我认为它仅运行javaScript验证" onClick")。 我可以使用以下扩展名在框中输入带有扩展名的文本： 1document.getElementById("input1").value = 'test';但是，当我单击提交时，它认为我没有在" input1"文本框中输入任何内容，因为我从未单击过它或在其上使用选项卡。 有人可以帮我解决这个问题吗？ 模拟鼠标单击我的猜测是网页正在监听鼠标按下而不是单击(这对可访问性不利，因为当用户使用键盘时，仅触发焦点和单击，而不是按下鼠标)。因此，您应该模拟mousedown，click和mouseup(顺便说一下，这就是iPhone，iPod Touch和iPad在点击事件中所做的事情)。 要模拟鼠标事件，可以将此片段用于支持DOM 2事件的浏览器。要获得更简单的仿真，请改用initMouseEvent填充鼠标位置。 123456789101112// DOM 2 Events var dispatchMouseEvent = function(target, var_args) { var e = document.createEvent("MouseEvents"); // If you need clientX, clientY, etc., you can call // initMouseEvent instead of initEvent e.initEvent.apply(e, Array.prototype.slice.call(arguments, 1)); target.dispatchEvent(e); }; dispatchMouseEvent(element, 'mouseover', true, true); dispatchMouseEvent(element, 'mousedown', true, true); dispatchMouseEvent(element, 'click', true, true); dispatchMouseEvent(element, 'mouseup', true, true);当您触发模拟点击事件时，浏览器实际上会触发默认操作(例如，导航到链接的href或提交表单)。 在IE中，等效的代码段是这样的(由于我没有IE，因此未经验证)。我认为您不能为事件处理程序提供鼠标位置。 12345// IE 5.5+ element.fireEvent("onmouseover"); element.fireEvent("onmousedown"); element.fireEvent("onclick"); // or element.click() element.fireEvent("onmouseup");模拟按键和按键 您可以模拟按键事件和按键事件，但不幸的是，在Chrome中，它们仅触发事件处理程序，并且不执行任何默认操作。我认为这是因为DOM 3事件工作草案描述了关键事件的这种时髦顺序： 按下(通常具有默认操作，例如点击，提交或textInput事件) 按键(如果该键不仅仅是Shift或Ctrl等修饰键) (keydown，keypress)如果用户按住按钮，则repeat = true 默认的按键动作！！ 键控这意味着您必须(在合并HTML5和DOM 3事件草稿时)模拟浏览器原本会执行的大量操作。我讨厌这样做。例如，这大致是模拟输入或文本区域上的按键的方法。 1234567891011121314151617181920212223242526272829303132333435363738// DOM 3 Events var dispatchKeyboardEvent = function(target, initKeyboradEvent_args) { var e = document.createEvent("KeyboardEvents"); e.initKeyboardEvent.apply(e, Array.prototype.slice.call(arguments, 1)); target.dispatchEvent(e); }; var dispatchTextEvent = function(target, initTextEvent_args) { var e = document.createEvent("TextEvent"); e.initTextEvent.apply(e, Array.prototype.slice.call(arguments, 1)); target.dispatchEvent(e); }; var dispatchSimpleEvent = function(target, type, canBubble, cancelable) { var e = document.createEvent("Event"); e.initEvent.apply(e, Array.prototype.slice.call(arguments, 1)); target.dispatchEvent(e); }; var canceled = !dispatchKeyboardEvent(element, 'keydown', true, true, // type, bubbles, cancelable null, // window 'h', // key 0, // location: 0=standard, 1=left, 2=right, 3=numpad, 4=mobile, 5=joystick ''); // space-sparated Shift, Control, Alt, etc. dispatchKeyboardEvent( element, 'keypress', true, true, null, 'h', 0, ''); if (!canceled) { if (dispatchTextEvent(element, 'textInput', true, true, null, 'h', 0)) { element.value += 'h'; dispatchSimpleEvent(element, 'input', false, false); // not supported in Chrome yet // if (element.form) element.form.dispatchFormInput(); dispatchSimpleEvent(element, 'change', false, false); // not supported in Chrome yet // if (element.form) element.form.dispatchFormChange(); } } dispatchKeyboardEvent( element, 'keyup', true, true, null, 'h', 0, '');我认为不可能在IE中模拟关键事件。 相关讨论 万一有人碰到这种寻找框架不可知的方式来触发任何HTML和Mouse事件(并在需要时设置一些选项)的情况，请在此处查看：stackoverflow.com/questions/6157929/ @TweeZz，要明确一点，我也不依赖任何库。但是我喜欢您将所有功能组合为一个功能的方式。 :)就个人而言(如果可能)，我更喜欢一个答案，我可以将其粘贴到我的代码中进行尝试：) 我已经尝试过(在Chrome扩展程序中)，但无法正常工作...创建事件的日志显示"哪个"，" charCode"和" keyCode"为0，而不是正确的字符/键代码。有人有同样的问题吗？ 我有和@hamczu一样的问题有人解决了吗？ @hamczu此SO答案具有针对charCode = 0问题的解决方法。这是webkit中的一个已知错误-已经开放了大约5年！ @TweeZz看起来您的框架不可知论方法没有像此答案那样提供执行键事件的方法，是吗？ @Michael Yea，它不支持按键事件。 在Firefox中，document.createEvent(KeyboardEvents)调用使我在Firefox中出现"不支持操作"异常；此外，Mozilla文档说不建议使用此方法，而推荐使用事件构造器...看起来它应该是" KeyboardEvent"(单数)。 在最新的Firefox中找不到initKeyBoardEvent函数。有initKeyEvent("壁虎特定"？)，但是该函数没有相同数量的参数。 有任何在Chrome扩展程序中调度键盘事件的解决方案吗？ 截至2016年9月17日，此代码在最新版的chrome中不再起作用 截至2017年1月8日，此代码在最新版本的chrome中不再起作用，此答案需要更新！您可以通过执行以下操作引发元素上的click事件： 1234// this must be done after input1 exists in the DOM var element = document.getElementById("input1"); if (element) element.click();这里的例子 相关讨论 我尝试了此操作，但由于某些原因，该网站仍然认为我没有在其中输入任何内容……很奇怪。 尝试其他事件，例如focus，change，keypress 我发现这在Chrome(WebKit)上不起作用。 HTMLAnchorElement的click属性未定义。 您在什么平台上运行什么版本的Chrome？我只是尝试访问Windows7上15.0.874.102上的示例页面，并且该页面正常工作。该示例对您有用吗？甚至更短，仅使用标准的现代Javascript： 12var first_link = document.getElementsByTagName('a')[0]; first_link.dispatchEvent(new MouseEvent('click'));new MouseEvent构造函数使用必需的事件类型名称，然后是可选对象(至少在Chrome中为)。因此，您可以例如设置事件的一些属性： 1first_link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}));在Chrome中模拟键盘事件： webkit中有一个相关的错误，当使用时会初始化键盘事件 initKeyboardEvent获取不正确的keyCode和charCode为0：https://bugs.webkit.org/show_bug.cgi?id=16735 一个有效的解决方案发布在此SO答案中。 重点可能是您要寻找的。通过单击或单击，我认为您的意思是给予元素焦点。与Russ相同的代码(对不起，我偷了它：P)，但是触发了另一个事件。 1234// this must be done after input1 exists in the DOM var element = document.getElementById("input1"); if (element) element.focus(); 相关讨论 谢谢，我也尝试了此操作以及单击，但是该网站仍然认为我没有在其中输入任何内容。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |