Using ENTER key to replace button click?

Question

<body>
    <form>
        <label>enter number here: </label>
        <input type="number" id="text"/>
        <button type="button" id="btn" onclick="calc()">read</button>
    </form>

    <script>
        document.getElementById("text").addEventListener("keyup", function(event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("btn").click();
          }
        }); 
    </script>

    <br>
    <label id = "calculated"></label>       

    <script>
      function calc() {
        let inputValue = document.getElementById("text").value;
        document.getElementById('calculated').innerHTML = 'your number: ' + inputValue;
        }
    </script>
</body>

I have a very simple HTML file with minimal javascript included. When I click the button, it works perfectly. But when I hit the ENTER on the keyboard to simulate the button click, it will also run through the code, but then an error happens at the end.

On Firefox and Chrome, it'll return an error "Not Found". On w3schools, it'll return "The file you asked for does not exist". And on stackoverflow, it'll just disappear.

What am I missing? Where is the error? What's the trick to making the ENTER key act just like the mouse click?

One press of enter, your form is getting submitted. You can use `preventDefault()` to avoid it. https://stackoverflow.com/questions/8866053/stop-reloading-page-with-enter-key — Hassan Imam, Sep 05 '21 at 08:38
`preventDefault()` is there in the first script. Are you saying it needs to be elsewhere? — user2323030, Sep 05 '21 at 08:50
Do the function in your keypress statement rather than programmatically clicking the button. You'll skip an entire step and just run the function. — Martin, Sep 05 '21 at 08:55
@user2323030 your preventDefault prevents default behavior for keyup event, not for submission. — Vladimir Gordeev, Sep 05 '21 at 09:10
@user2323030 quick fix: add event handler for `submit` event on `form` element, which will do just `preventDefault()` — Vladimir Gordeev, Sep 05 '21 at 09:11

score 0 · Answer 1 · answered Sep 05 '21 at 09:13

HTML form has onsubmit attribute on them. onsubmit handles the enter functionality. You have to set the type="submit" on the button, also you need to set the onsubmit on form passing the event to your function so that you can prevent the default action of the form ( that is to send the request to backend ) by doing e.preventDefault.

<body>
    <form onsubmit="calc(event)">
        <label>enter number here: </label>
        <input type="number" id="text"/>
        <button type="submit">read</button>
    </form>

    <br>
    <label id = "calculated"></label>       

    <script>
      function calc(e) {
        // Will stop the form from sending the request to backend
        e.preventDefault()

        let inputValue = document.getElementById("text").value;
        document.getElementById('calculated').innerHTML = 'your number: ' + inputValue;
      }
    </script>
</body>

Shlomtzion · Answer 2 · 2021-09-05T09:24:16.187

If you want to just prevent ENTER from doing anything including running the code....

The following code (yours with a couple more lines... will prevent Enter from doing anything:

<body>
    <form onsubmit="return mySubmitFunction(event)">
            <label>enter number here: </label>
            <input type="number" id="text"/>
            <button type="button" id="btn" onclick="calc()">read</button>
    </form>

    <script>
            document.getElementById("text").addEventListener("keyup", function(event) {
            if (event.keyCode === 13) {
                    event.preventDefault();
                    return false;
                    //document.getElementById("btn").click();
                }
            });
    </script>

    <br>
    <label id = "calculated"></label>

    <script>
        function mySubmitFunction(e) {
            e.preventDefault();
            return false;
        }

        function calc() {
            let inputValue = document.getElementById("text").value;
            document.getElementById('calculated').innerHTML = 'your number: ' + inputValue;
            }
    </script>

Why was this happening? since the form element itself has a submit and the enter key is a key pressed which also does a form submit.... so you need to prevent the form from submitting... mySubmitFunction() <- this prevents the form from submitting ... and a change to your keyup event listener - if you do not want enter to even create the click you change this:

event.preventDefault();
document.getElementById("btn").click();

to this :

event.preventDefault();
return false;
//document.getElementById("btn").click();

As I have already did in the code example. or leave it like you had(the event listener keyup) and the Enter key will only act as a click.

Using ENTER key to replace button click?

2 Answers2