在输入框中按下回车键触发按钮点击功能。

Question

    <form onsubmit="myFunction()">
        Enter name: <input type="text" name="fname">
        <!--input type="submit" value="Submit"-->
        <button onclick="alert('button click')">click</button>
    </form>

在输入框按下回车键会触发按钮的onclick事件，导致表单被提交。如何避免按钮onclick事件的触发。

- shanmukh mullapudi

---

这是所有浏览器的标准功能。在表单中输入 = 提交。 - freedomn-m

这回答解决了你的问题吗？如何防止用户按Enter提交表单 - freedomn-m

表单的onsubmit函数将被执行。但是当在表单内部的按钮上点击时，会被执行。有什么方法可以避免这种情况？ - shanmukh mullapudi

它通过“点击”与表单相关的提交按钮进行提交。如果您将按钮更改为type ='button'，则不会被点击，但是也不会提交，因此您的按钮单击还需要提交表单。 - freedomn-m

Answer 1

当表单中有一个按钮时，默认情况下其类型为“submit”，这意味着表单中的第一个按钮将在按下回车键时触发其onclick事件。要防止这种情况发生，只需将按钮的类型赋值为“button”，回车键就不再影响它了。

- akm elias

---

这实际上是规范的一部分吗？还是只是在2022年偶然能够工作的东西？ - matt richards

@mattrichards 这一直是这样。 - akm elias

Answer 2

在表单渲染后运行此代码

document.querySelector('input[name="fname"]').onkeydown=e=>{

   if(e.key==='Enter')e.preventDefault();

   //if you want form submission
   document.querySelector('form').submit();

};

- matt richards

Answer 3

试一下这个

<form onsubmit="myFunction()">
    Enter name: <input type="text" name="fname" id="fname">
    <!--input type="submit" value="Submit"-->
    <button onclick="alert('button click')" id="btn">click</button>
</form>

<script type="text/javascript">
    var input = document.getElementById("fname");
    input.addEventListener("keypress", function(event) {
        if (event.key === "Enter") {
            event.preventDefault();
            document.getElementById("btn").click();
        }
    });
</script>

- Danz

---

"keypress已被弃用 [Element: keypress event] (https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event)，请改用'keydown'代替[](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event)" - matt richards