リターンキーが押されたときにフォームを送信するにはどうすればよいですか？

Question 1

誰かがリターンキーが押されたとき、そしてフォームにボタンがない場合にHTMLフォームを送信する方法を教えてもらえますか？ 送信ボタンはありません。その代わりにカスタムdivを使用しています。

Question 2

IMO、これは最もクリーンな答えです：

<form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input type="submit" style="display:none"/>
</form>

スニペットを展開

さらに良いことに、JavaScriptを使用してカスタムdivを使用してフォームを送信する場合は、JavaScriptを使用してフォームを作成し、ボタンにdisplay：noneスタイルを設定する必要があります。このようにして、JavaScriptが無効になっているユーザーは、引き続き送信ボタンを表示してクリックできます。

display：noneを指定すると、IEは入力を無視することに注意してください。標準フォームとして開始し、プログレッシブエンハンスメントを使用して送信を非表示にし、新しいdivを作成する新しいJSFiddleの例を作成しました。StriplingWarriorのCSSスタイルを使用しました。

Question 3

エンターキーが押されたときにフォームを送信するには、これらの行に沿ってjavascript関数を作成します。

function checkSubmit(e) {
   if(e && e.keyCode == 13) {
      document.forms[0].submit();
   }
}

次に、必要なスコープにイベントを追加します（例：divタグ）。

<div onKeyPress="return checkSubmit(event)"/>

これは、とにかくInternet Explorer 7のデフォルトの動作でもあります（おそらく以前のバージョンも同様です）。

Question 4

さまざまなjavascript / jQueryベースの戦略を試しましたが、問題が発生し続けました。発生した最新の問題は、ユーザーがEnterキーを使用して、ブラウザーの組み込みのオートコンプリートリストから選択したときに誤って送信されたことです。私はついにこの戦略に切り替えました。これは、私の会社がサポートしているすべてのブラウザーで機能するようです。

<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>

.hidden-submit {
    border: 0 none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

これは、Chris Marasti-Georgによって現在受け入れられている回答に似ていますが、回避display: noneすることにより、すべてのブラウザーで正しく機能するように見えます。

更新

上記のコードを編集してネガを含めtabindex、タブキーをキャプチャしないようにしました。これは技術的にはHTML4で検証されませんが、HTML5仕様には、ほとんどのブラウザーが既に実装している方法で機能させるための言語が含まれています。

Question 5

<button>タグを使用します。W3C標準から：

BUTTON要素で作成されたボタンは、INPUT要素で作成されたボタンと同じように機能しますが、より豊富なレンダリングの可能性を提供します。BUTTON要素にはコンテンツが含まれる場合があります。たとえば、画像を含むBUTTON要素は、タイプが「image」に設定されているINPUT要素のように機能し、類似している可能性がありますが、BUTTON要素タイプはコンテンツを許可します。

基本的に、JavaScript<button>を必要としない別のタグがあり、フォームを送信することもできます。<div>タグのように（<img />ボタンタグの内側を含めて）多くのスタイルを設定できます。<input />タグのボタンはそれほど柔軟ではありません。

<button type="submit">
    <img src="my-icon.png" />
    Clicking will submit the form
</button>

に設定する3つのタイプがあり<button>ます; それらは<input>ボタンタイプにマップされます。

<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>

規格

私は<button>タグを使用しますcss-スプライトと少し cssカラフルで機能的なフォームボタンを取得するためのスタイリング。たとえば、要素<a class="button">を使用したスタイル設定へのリンク共有のcssを記述できることに注意してください<button>。

Question 6

私はこれがあなたが望むものだと信じています。

//<![CDATA[

//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
  if (e.which == 13) { sendform(); }
}

//Form to send
function sendform() {
  document.forms[0].submit();
}
//]]>

キーが押されるたびに、関数enter（）が呼び出されます。押されたキーがEnterキー（13）と一致する場合、sendform（）が呼び出され、最初に検出されたフォームが送信されます。これは、Firefoxおよびその他の標準に準拠したブラウザ専用です。

このコードが役に立ったら、ぜひ私に投票してください！

Question 7

これがjQueryでそれを行う方法です

j(".textBoxClass").keypress(function(e)
{
    // if the key pressed is the enter key
    if (e.which == 13)
    {
        // do work
    }
});

他のJavaScriptはそれほど違いはありません。キャッチは、エンターキーである「13」のキー押下引数をチェックしています。

Question 8

次のスクリプトを使用します。

<SCRIPT TYPE="text/javascript">
<!--
    function submitenter(myfield,e)
    {
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        else return true;

        if (keycode == 13)
        {
            myfield.form.submit();
            return false;
        }
        else
            return true;
    }
//-->
</SCRIPT>

ユーザーがEnterキーを押したときにフォームを送信する必要がある各フィールドについて、次のようにsubmitenter関数を呼び出します。

<FORM ACTION="../cgi-bin/formaction.pl">
    name:     <INPUT NAME=realname SIZE=15><BR>
    password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
       onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

Question 9

私はこの方法を使用します：

<form name='test' method=post action='sendme.php'>
    <input type=text name='test1'>
    <input type=button value='send' onClick='document.test.submit()'>
    <input type=image src='spacer.gif'>  <!-- <<<< this is the secret! -->
</form>

基本的に、タイプimageの非表示の入力を追加するだけです（「spacer.gif」は1x1の透明なgifです）。

このようにして、「送信」ボタンを使用するか、キーボードのEnterキーを押すだけで、このフォームを送信できます。

これがトリックです！

Question 10

div送信スタイルを送信ボタンに適用してみませんか？このためのJavaScriptがあると確信していますが、それはもっと簡単でしょう。

Question 11

asp.netを使用している場合は、フォームでdefaultButton属性を使用できます。

Question 12

実際に送信ボタンまたは送信画像が必要だと思います...「送信div」を使用する特別な理由はありますか？カスタムスタイルが必要な場合は、お勧めし<input type="image"...ます。http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

Question 13

答えを拡張すると、これは私のために働いたものです、多分誰かがそれが役に立つと思うでしょう。

HTML

<form method="post" action="/url" id="editMeta">
   <textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>

Js

function submitOnEnter(e) {
  if (e.which == 13) {
    document.getElementById("editMeta").submit()
  }
}

Question 14

Chris Marasti-Georgの例に似ていますが、代わりにインラインjavascriptを使用しています。基本的に、Enterキーを使用するフィールドにonkeypressを追加します。この例は、パスワードフィールドに作用します。

<html>
<head><title>title</title></head>
<body>
  <form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
  <input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>

Question 15

以来display: noneボタンや入力はSafariとIEで動作しません、私は最も簡単な方法は、必要としないことがわかった余分なJavaScriptのハックを、単に絶対位置を追加することで<button />、フォームにし、はるかに画面をオフに置きます。

<form action="" method="get">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <div class="yourCustomDiv"/>
  <button style="position:absolute;left:-10000px;right:9990px"/>
</form>

これは、2016年9月現在のすべての主要なブラウザーの現在のバージョンで機能します。

明らかに、<button/>必要に応じてスタイルを設定することをお勧めします（そしてより意味的に正しい）。

Question 16

「autofocus」属性を使用すると、デフォルトでボタンに入力フォーカスを与えることができます。実際、フォーム内の任意のコントロールをクリックすると、フォームにフォーカスが移ります。これは、フォームがRETURNに反応するための要件です。したがって、ユーザーがフォーム内の他のコントロールをクリックしたことがない場合に備えて、「オートフォーカス」がそれを行います。

したがって、ユーザーがRETURNを押す前にフォームコントロールのいずれもクリックしなかった場合、「オートフォーカス」は決定的な違いをもたらします。

ただし、それでも、JSなしでこれを機能させるには2つの条件を満たす必要があります。

a）移動するページを指定する必要があります（空のままにすると機能しません）。私の例では、hello.phpです。

b）コントロールが表示されている必要があります。ページから移動して非表示にすることもできますが、display：noneまたはvisibility：hiddenを使用することはできません。私がやったことは、インラインスタイルを使用して、ページから200px左に移動することでした。スペースを取らないように高さを0pxにしました。そうしないと、上下の他のコントロールが中断される可能性があるためです。または、要素をフロートさせることもできます。

<form action="hello.php" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>