如何使用 html 在回车键上调用函数

Question

我有这个标记：

<input type="text" placeholder="...">
<button type="button" onclick="newInput();">Enter</button>

我想知道如何通过键入 `enter` 来调用我的函数，而不必实际按下按钮？

你怎么能这样做？

编辑：这可以通过使用事件侦听器的 JS 来完成，但我想知道您是否可以在纯 HTML.

中调用该函数

Answer 1

我在您的表单上使用了“提交”事件侦听器。您必须在您的函数中对事件调用 preventDefault()，这样可以避免表单提交的默认行为。

请看下面的片段

function newInput(e){
  e.preventDefault();
  alert('Function called');
}

// The form element
var form = document.getElementById("submitForm");

// Attach event listener
form.addEventListener("submit", newInput, true);

<form id="submitForm">
    <input type="text" placeholder="...">
    <button type="submit">Enter</button>
<form>

编辑：关于您的编辑，您还可以在表单元素上使用“onsubmit”属性：

function newInput(){
  alert('Function called');
}

<form onsubmit="newInput()" id="submitForm">
<input type="text" placeholder="...">
<button type="submit">Enter</button>
<form>

如何使用 html 在回车键上调用函数

How to call function on enter key press with html

html

javascript

input

我想知道如何通过键入 `enter` 来调用我的函数，而不必实际按下按钮？

如何使用 html 在回车键上调用函数

How to call function on enter key press with html

html

javascript

input

我想知道如何通过 键入 enter 来调用我的函数，而不必实际按下按钮？

我想知道如何通过键入 `enter` 来调用我的函数，而不必实际按下按钮？