question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sending 'Enter' key event on input field

See original GitHub issue

The issue was originally submitted to ‘chrome-remote-interface’ repo at https://github.com/cyrus-and/chrome-remote-interface/issues/226 and I was redirected to this repo.


Component Version
Operating system Ubuntu 16.10
Node.js 8.1.2
Chrome/Chromium/… 60.0.3112.78 (Official Build) beta (64-bit)
chrome-remote-interface 0.24.3

Is Chrome running in a container? NO


My issue is with firing ‘Enter’ key on input field.

I thought that the code await Input.dispatchKeyEvent({ type: 'rawKeyDown', keyIdentifier: 'Enter' }) would work, but it did not.

This is my code:

const CDP = require("chrome-remote-interface")
const chromeLauncher = require("chrome-launcher")
const getPort = require("get-port")
const R = require("rambdax")

const chromeFlags = [
  "--disable-gpu",
  "--disable-sync",
  "--no-first-run",
  "--headless",
  "--window-size=1366,768"
]

const main = async () => {
  try{
    const port = await getPort()
    const chrome = await chromeLauncher.launch({
      chromeFlags,
      port,
    })
    const client = await CDP({ port })
    const { Page, Runtime, Input } = client

    await Promise.all([
      Page.enable(),
      Runtime.enable(),
    ])

    await Page.navigate({ url : 'https://www.google.com' })
    await Page.loadEventFired()
    await R.delay(1000)
    await Input.dispatchKeyEvent({ type: 'char', text: 'm' })
    await R.delay(200)
    await Input.dispatchKeyEvent({ type: 'char', text: 'o' })
    await R.delay(200)
    await Input.dispatchKeyEvent({ type: 'char', text: 'e' })
    await R.delay(200)
    await Input.dispatchKeyEvent({ type: 'rawKeyDown', keyIdentifier: 'Enter' })
    await R.delay(3000)
  }catch(err){
    console.log(err)
  }
}

main()

Any help will be appreciated. Thanks!

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
activeliangcommented, May 30, 2021
async pressedEnter() {
  await Input.dispatchKeyEvent({ "type": "rawKeyDown", "windowsVirtualKeyCode": 13, "unmodifiedText": "\r", "text": "\r" })
  await Input.dispatchKeyEvent({ "type": "char", "windowsVirtualKeyCode": 13, "unmodifiedText": "\r", "text": "\r" })
  await Input.dispatchKeyEvent({ "type": "keyUp", "windowsVirtualKeyCode": 13, "unmodifiedText": "\r", "text": "\r" })
}

it works for me

6reactions
kdzwinelcommented, Aug 4, 2017

I don’t remember the details, but I do remember having the exact same issue. This code worked for me: https://github.com/ChromeDevTools/EmulatedDeviceLab/blob/master/lib/device.js#L192 Try providing windowsVirtualKeyCode: 13 instead of keyIdentifier: 'Enter'.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Detect the Enter key in a text input field - javascript
$(".input1").on('keyup', function (e) { if (e.key === 'Enter' || e.keyCode === 13) { // Do something } }); // e.key is the modern...
Read more >
How To Trigger Button Click on Enter - W3Schools
Trigger a button click on keyboard "enter" with JavaScript. Trigger a Button Click on Enter. Press the "Enter" key inside the input field...
Read more >
jQuery detect ENTER key press event - HowToDoInJava
To check whether user pressed ENTER key on webpage or on any input element, you can bind keypress or keydown event to that...
Read more >
How to Detect the Enter Key Press in a Text Input Field Using ...
Answer: Use the keypress event. To check whether a user has pressed Enter key while on specific input, you can use the keypress...
Read more >
How to get the enter key in ReactJS ? - GeeksforGeeks
We will be creating an input field that takes the message as input. In the input, we have added an on Keypress function...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found