0

I recently made a full virtual keyboard for my web application and I would like to add a button to simulate the enter key.

For example, when the user types something in an input field and presses the Enter key on the virtual keyboard, I want the input field to search the website for what they've typed.

I finished the searching part but all what I need is to add a virtual enter key to the keyboard.

How can I create a button that would simulate a physical enter key press?

Update: Thank you all for helping me out! But unfortunately none of the answers below solved my issue :-(

However I found a workaround for the problem

I put my input field in a form like this

 <form> <input type = "text" placeholder = "Search The website"></input></form>

Then I added a button right next to the input field inside the form like this

<form> <input type = "text" placeholder = "Search The website"></input> 
<button>Search</button>
</form>

And that automatically solved my problem I didn't get to simulate the enter key after all. But I found this easy workaround. I didn't even need any JavaScript. So yeah thank you all for trying to help me out.

Mohamed Technology
  • 45
  • 2
  • 10
  • 4
    Possible duplicate of [jquery (or pure js) simulate enter key pressed for testing](https://stackoverflow.com/questions/3276794/jquery-or-pure-js-simulate-enter-key-pressed-for-testing) – Kobe Jul 26 '19 at 08:51
  • 1
    You mean you currently have an event listener that does `if(event.key === "Enter") doSearch()`? Then just do `doSearch()`, no need to simulate anything. – Kaiido Jul 26 '19 at 08:53
  • @Kaiido Read his question again. He wants to simulate clicking enter - not trigger an event when it is clicked. – Kobe Jul 26 '19 at 08:54
  • @Kobe read my comment again... – Kaiido Jul 26 '19 at 08:54
  • @Kaiido He's using a virtual keyboard? So it will most likely be a mouseclick, not a keyboard click? – Kobe Jul 26 '19 at 08:55
  • @Kalido no I don't have any event listeners I just want to add a virtual enter key to my Virtual keyboard. – Mohamed Technology Jul 26 '19 at 08:56
  • @Kobe they are willing to perform an action, which is apparently currently triggered by a keyboard event, if they want to simulate this event now, it's only to perform that action, but they simply don't need to simulate that event. All they need is to call whatever performs the search operation. – Kaiido Jul 26 '19 at 08:57
  • @Kaiido Ah, I understand now. I was going to say the same, why go the extra step to dispatch an event when you can just directly execute the function. – Kobe Jul 26 '19 at 08:58
  • You can not send an event to mimic the "Enter" key of a keyboard with Javascript. Javascript can have listeners to grab events coming from the keyboard and not sent events to the keyboard. So no you can not "mimic" a general "Enter" key through Javascript. You can bind a Key to execute a Specific Function on a Web Page (you already know that though) but not "work" as an "Enter" key. – Strahdvonzar Jul 26 '19 at 09:02
  • @Strahdvonzar that's not true, see the duplicate i linked, using a `KeyboardEvent` – Kobe Jul 26 '19 at 09:04

3 Answers3

2

Create an event and trigger it from the click handler of your button, like this:

function clickHandler () {
    var simulatedEvent = new KeyboardEvent("keypress", {keyCode: 13, which: 13});
    document.getElementById("yourSearchInput").dispatchEvent(simulatedEvent);
}
Álvaro Tihanyi
  • 1,062
  • 1
  • 11
  • 18
0

Thank you all for helping me out! But unfortunately none of the answers below solved my issue :-(

However I found a workaround for the problem

I put my input field in a form like this

 <form> <input type = "text" placeholder = "Search The website"></input></form>

Then I added a button right next to the input field inside the form like this

<form> <input type = "text" placeholder = "Search The website"></input> 
<button>Search</button>
</form>

And that automatically solved my problem I didn't get to simulate the enter key after all. But I found this easy workaround. I didn't even need any JavaScript. So yeah thank you all for trying to help me out.

Mohamed Technology
  • 45
  • 2
  • 10
-2

JS 

var searchfield = document.getElementById("txtSearch");
var simulatedEvent = new KeyboardEvent("keypress", { keyCode: 13, which: 13 });
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click').
    subscribe(
        (value) => {
            console.log(searchfield.value);
            //callserachfunction(searchfield.value);
            //or
            searchfield.dispatchEvent(simulatedEvent);

        }
);

function callserachfunction(searchtext) {
    console.log(searchtext);
    //search here 
}

searchfield.addEventListener("keypress", function (e) {

    if (e.which == 13){
        console.log('search here');
        // search here 
    }
});

HTML 

 <script src = "https://unpkg.com/@reactivex/rxjs@5.3.0/dist/global/Rx.js" ></script>
</head>
<body>

    <input type="text" name="add activities" id="txtSearch"  placeholder="SEARCH ">
    <button id="btnVirtualEnter">Virtual Enter</button>

I hope it helps

debugmode
  • 936
  • 7
  • 13
  • This is wrong. OP has asked to simulate clicking the enter button, not listen for an actual event. – Kobe Jul 26 '19 at 09:02
  • @debugmode Thank you For trying to help me out. But this is not what I wanted. What I wanted was to have a button on my page and when that button is pressed its going to make the input field think that a PHYSICAL enter key was pressed – Mohamed Technology Jul 26 '19 at 09:11
  • You need to read stream of events. RxJS can help. Do you want me to send you answer using RXJS ? it would be simpler – debugmode Jul 26 '19 at 09:24
  • Oh thank You so much for Your help. I'll try your answer and I'll let you know about it – Mohamed Technology Jul 26 '19 at 10:48