onclick事件在單擊按鈕時提交，但在鍵盤上按Enter時不提交嗎？

Question

我只使用HTML和JavaScript。

我有一種形式

  <form id="form1">
<input name="name" type="text" size="20">
</form> 

一鍵

<button onclick="outputname()" type="submit">Search</button>

因此，想法是用戶在表單上鍵入數字並單擊搜索按鈕，然后執行一個操作（效果很好）。

但是，如果用戶輸入數字並按鍵盤上的Enter鍵，則會刷新頁面。 在iPad上也是如此。 （顯示“返回”按鈕而不是“執行”）。

所以我想讓Enter按鈕在鍵盤上工作，而Go在iOS上工作。

想法是，用戶輸入客戶編號，並顯示相關詳細信息。

Answer 1

在輸入字段和按鈕上都輸入一個ID，以確保捕獲到正確的ID：

HTML：

<form action="destination.html" method="post">
    <input id="foo" name="name" type="text" size="20">
    <button id="mybutt" onclick="outputname()" type="submit">Search</button>
</form>

請注意， destination.html是要將數據發布到的位置。 如果要將其發布到同一文件，只需使用： action=""或將其保留。

Javascript：

document.getElementById('foo').onkeypress = function(e){
    if (!e) e = window.event;
    var keyCode = e.keyCode || e.which;
    if (keyCode == '13'){
        var btn = document.getElementById('mybutt');
        mybutt.click();
        return false;
    }
}

資料來源：

如何檢測用戶何時在輸入字段中按Enter

使用javascript捕獲Enter鍵以導致按鈕單擊

Answer 2

在表單標簽內插入以下內容： action="post" 。 即，您的表單標簽必須采用這種方式<form id="form1" action="post">

Answer 3

在這種情況下，您可以管理submit事件，而不是key / click事件。

<form id="form1" onsubmit="outputname()">

通過單擊或按Enter觸發的提交事件將調用outputname 。