使用 ENTER 键替换按钮单击？答案

【问题标题】：Using ENTER key to replace button click?使用 ENTER 键替换按钮单击？
【发布时间】：2021-09-05 08:36:30
【问题描述】：

<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>

我有一个非常简单的 HTML 文件，其中包含最少的 javascript。当我单击按钮时，它可以完美运行。但是当我敲击键盘上的ENTER模拟按钮点击时，它也会运行代码，但最后会出现错误。

在 Firefox 和 Chrome 上，它会返回错误“未找到”。在 w3schools 上，它会返回“您要求的文件不存在”。而在 stackoverflow 上，它就会消失。

我错过了什么？错误在哪里？让 ENTER 键像鼠标点击一样的技巧是什么？

【问题讨论】：

按回车键，您的表单正在提交。您可以使用preventDefault() 来避免它。 stackoverflow.com/questions/8866053/…
preventDefault() 在第一个脚本中。你是说它需要在其他地方吗？
在您的按键语句中执行该功能，而不是以编程方式单击按钮。您将跳过整个步骤并运行该函数。
@user2323030 你的 preventDefault 阻止了 keyup 事件的默认行为，而不是提交。
@user2323030 快速修复：在form 元素上添加submit 事件的事件处理程序，这将只是preventDefault()

标签： javascript html

【解决方案1】：

HTML 表单上有 onsubmit 属性。 onsubmit 处理输入功能。您必须在按钮上设置type="submit"，还需要在将事件传递给您的函数的表单上设置onsubmit，以便您可以防止表单的默认操作（即发送请求到后端）通过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>

【讨论】：

【解决方案2】：

如果您只想阻止 ENTER 执行任何操作，包括运行代码......

以下代码（您的代码还有几行...将阻止 Enter 执行任何操作：

<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>

为什么会这样？因为表单元素本身有一个提交，而回车键是一个按下的键，它也执行表单提交......所以你需要阻止表单提交...... mySubmitFunction()

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

到这里：

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

正如我在代码示例中所做的那样。或者像以前一样保留它（事件侦听器 keyup），Enter 键只会作为点击。

【讨论】：