Enter on text field not working in webpages

JavaScript
1

I am trying to automate a process on webpages. The element is

<input aria-expanded="false" aria-owns="search-dropdown-results" data-accessibility-id="header-search-input-field" data-anchor-id="HeaderSearchInputField" data-lpignore="true" type="text" autocomplete="off" placeholder="Search stores, dishes, products" inputmode="search" id="FieldWrapper-0" aria-describedby="search-dropdown-results" class="Input__InputContent-sc-1o75rg4-3 idveBz" value="">

First, I entered a text in the field and then I want to press Enter. But the Enter part is not working. Please help.

var inputElement = document.getElementById('FieldWrapper-0');
inputElement.value = "TEXT";
inputElement.dispatchEvent(new Event('input', { bubbles: true }));
inputElement.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'Enter' }));

2

Hello, So is the code on a SPA or similar, can you give more infromation, a url perhaps or the entire working code.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My SPA Text Field</title>
</head>
<body>
   <label for="myTextField">Enter your text:</label>
   <input type="text" id="myTextField" placeholder="Type something...">
   <button onclick="getText()">Submit</button>

   <script>
       function getText() {
           const inputText = document.getElementById('myTextField').value;
           alert(`You entered: ${inputText}`);
           // You can perform other actions with the input text here.
       }
   </script>
</body>
</html>
3

Do you need the event dispatching?

You can listen for the "change" event on the input element, that will trigger on Enter.

inputElement.addEventListener('change', () => console.log('do something'))
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.