web-dev-qa-db-ja.com

HTML5：テキスト入力でEnterキーを押した後、フォームを送信する方法は？

タイトルはそれ自体を物語っています...私にはいくつかのフォームがあります。1つはただのテキスト入力フォームで、もう1つは2つのテキスト入力で構成されています。いずれにも送信ボタンは必要ありません。ユーザーがテキスト入力でEnterボタンを押すたびに各フォームを送信します。

  1. ユーザーがENTERボタンを押すたびに、たった1つの入力で構成されるフォームが送信されます-Perfect！
  2. 2つのテキスト入力で構成される2番目のフォームはこのように動作せず、ユーザーが両方の入力のいずれかでENTERボタンを押しても送信されません。

フォームを作成する方法はありますか複数のテキスト入力を使用このように動作し、送信ボタンを避ける？

htmlhtml5formswebform-submit
35
charliebrownie

<form></form>タグの間にこれを追加してみてください

<input type="submit" style="display: none" />

それをテストし、FirefoxとChromeで動作します。フォームに送信入力タイプがある場合、 enter 表示されているかどうかにかかわらず、自動的に送信する必要があります。

私は実際にログインフォームでこれを使用していますが、ユーザー名フィールドでは、送信するよりも次のフィールドに移動する方が理にかなっています。同様のユースケースがある場合に備えて、私が使用したコードを次に示します（jQueryが必要です）

$('#username').keypress(function(event) {
    if (event.keyCode == 13 || event.which == 13) {
        $('#password').focus();
        event.preventDefault();
    }
});

ただし、ユーザーがブラウザのオートコンプリートユーザー名を選択してを押すと、わずかなバグがあることに注意してください。 enter、選択する代わりに次のフィールドに移動します。これをデバッグする時間はありませんでしたが、誰かがそれを修正する方法を見つけることができれば、それはクールです。

41
user193130

この問題の解決策を探していたので、ここでの多くの投稿に基づいて、解決策を共有したいと思います。 （最新のChrome/Firefox/IEでテスト済み）

したがって、次のコードは、JavaScriptのみを使用して、Enterキーが押された場合にフォームを送信しますany field またはボタンSubmitが押された場合その後、フォームをクリア/リセットします。これは良いことです。

それが役に立てば幸い。

<!DOCTYPE html>
<html>
<body>
<p>Based on http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onsubmit</p>
<p>When you submit the form, a function is triggered which alerts some text.</p>

<div onKeyPress="return myFunction(event)">
  <form id="form01" action="demo_form.asp" onsubmit="return false;" >
    Enter name: <input type="text" name="fname">
    <input type="button" value="Submit" onclick="myFunction(0)">
  </form>
</div>

<script>
function myFunction(e) {
   if((e && e.keyCode == 13) || e == 0) {
     alert("The form was submitted");
     document.forms.form01.submit();
     document.forms.form01.fname.value = ""; // could be form01.reset as well
   }
}
</script>

</body>
</html>
2
user3058813

Enterキーを押す必要があります。この投稿では、その方法を示します。 JavaScriptでキー押下イベントを入力

2
Jeremiah Jessel

入力が「form」要素内にあることを確認し、「form」要素に「action」属性を指定します。

2
Ahmadbaba46