10

I am developing some programmatic automation within a web page and am attempting to enter a keystroke into an input web element in Chrome 56 (specifically 56.0.2924.87) and cannot seem to get it working.

I have done my homework and attempted MANY online examples including the ones found here: Javascript - simulate key events on Chrome 53, but with no luck.

This is my most recent (currently non-working) attempt based on the solution provided in the question above:

<!DOCTYPE html>

<head>
  <meta charset="utf-8" />
  <title>Keyboard Events</title>
</head>

<body>
  <input id="id_input" onkeydown="console.log(event);">
  <button onclick="
    var e = new Event('keydown');
    e.keyCode = 65;
    document.getElementById('id_input').dispatchEvent(e);
    ">click me</button>
</body>

</html>

You can observe the event being generated, but no character appears in the input web element.

I would greatly appreciate a working JavaScript only example, working in Chrome 56, of pressing a button on a page and a character appearing in the input web element WITHOUT setting the "value" property of the input web element. The working solution must be causing characters to appear only by using events (presumably keypress/keydown, etc.)

UPDATE: My issue is different than this issue: How to trigger event in JavaScript? because I'm already using the dispatchEvent method listed in the solution. The answer to my question will likely include an additional step not already outlined in the multiple attempts from the first link I included.

Community
  • 1
  • 1
Loren
  • 190
  • 2
  • 14
  • If you have access to the form element - is there any reason why you wouldn't just set it's value? – Shadow Mar 07 '17 at 00:41
  • 1
    The solution will be used within the context of a Chrome Extension that automates a previously unknown System Under Test which uses event handlers EXPECTING the character comes through keydown/keypress events. I have already attempted setting the value directly and passing dummy events, but the SUT does not handle it appropriately. As an example, I need to pass an "Enter key" in special cases and have the input event handlers (which we do not control) respond accordingly as if someone had pressed the key. – Loren Mar 07 '17 at 00:44
  • It may not be possible to make the **browser** respond to simulated keyboard events: native software handlers for key events received from the OS do not have event listeners set up for the events they create and dispatch on `document.activeElement`. All they do is check that the events they dispatched weren't cancelled before proceding to add text content to an input element (say). – traktor Mar 07 '17 at 01:34
  • Possible duplicate of [How to trigger event in JavaScript?](http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript) – Psi Mar 07 '17 at 02:09
  • @Psi I appreciate you backing me up in due diligence for a "duplicate check", but I'm already using the dispatchEvent method as listed in the solution you reference. The answer to this question will likely include an additional step not already outlined in the multiple attempts from the link I placed in my question. – Loren Mar 07 '17 at 07:08
  • OK, was just an idea, not sure, whether the media keys are sent through a WM_message you already captured – Psi Mar 07 '17 at 08:41
  • What are you trying to achieve? – guest271314 Mar 17 '17 at 00:55
  • @guest271314 I have a Chrome Extension that performs "record and playback" functionality. I encountered a site that is difficult to perform a selection of a "dropdown" list. Call it "Phone type". The list is actually an with some background DOM magic (I believe) to do the dropdown effect. If a real user types the characters "Cell" and presses the ENTER key, the selection works. I am unable to duplicate this action using JS Events (using "known" tricks like in the post I linked above). So, basically I need to write JavaScript code in my Extension that legitimately passes characters. – Loren Mar 17 '17 at 01:18
  • @guest271314 I might add, when I attempt to simply stuff the value "Cell" into the value property and send keydown/keyup events, when focus changes away from the mentioned above (blur), the text "Cell" is erased by one of the developer's event handler's. – Loren Mar 17 '17 at 01:20
  • Not certain if the event would be trusted [Trigger click on input=file on asynchronous ajax done()](http://stackoverflow.com/questions/29728705/trigger-click-on-input-file-on-asynchronous-ajax-done). What is "some background DOM magic"? Is `` element used within `html`? – guest271314 Mar 17 '17 at 01:29
  • @guest271314 By "magic", I mean, the HTML employs a JavaScript library from Fast Enterprises, LLC and it's likely being leveraged here: `` A button element follows to do the "dropdown" – Loren Mar 17 '17 at 01:37
  • Is expected solution reverse-engineering a `javascript` library functionality, or implement a library to achieve the effect of the library? – guest271314 Mar 17 '17 at 01:42
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/138281/discussion-between-loren-and-guest271314). – Loren Mar 17 '17 at 01:48
  • My chromebook's chrome tab freezes when I click on your click me button. WHY!! – mehulmpt Mar 18 '17 at 14:45
  • You said you used the approach of setting the value and then dispatching the 'keydown' with enter right? You are only setting the keyCode attribute though, maybe the select is actually checking which or charCode, key or char. And maybe it's not looking at keydown, but keypress or keyup, maybe even input. – Martina Mar 18 '17 at 16:34
  • @Martina I appreciate your suggestion. My question includes a link to a previous question with several methods I attempted. Among my attempts, I have included setting keyCode, charCode, key, and code properties, plus sending keydown, keypress, keyup, beforeinput, and input events. – Loren Mar 18 '17 at 17:19

1 Answers1

8

In terms of implementing this functionality from within in a Chrome extension, it looks like it is possible with workarounds. These links might be able to help.

Keydown Which Not Working Chrome Extension
How to to initialize keyboard event with given char/keycode in a Chrome extension?

On a webpage however, this is not possible. At least not with Chrome 56. There is an isTrusted read only attribute of the Event object.

The event is "trusted" if invoked by a real user on a keyboard, and is "not trusted" if invoked by a script.

As indicated here, untrusted events do not invoke the default action. This has been present since Chrome 53.

Community
  • 1
  • 1
grizzthedj
  • 7,131
  • 16
  • 42
  • 62
  • It is clear that you can't do it from inside the page, but TC cases is different: there is an Chrome Extension involved and it might still be possible to generate `trusted` events from extension. At least the spec you referenced to doesn't mention such prohbition explicitly. – SergGr Mar 13 '17 at 13:30