web-dev-qa-db-ja.com

送信ボタンなしでEnterキーを押してフォームを送信する

Enterキーを押してフォームを送信しようとしていますが、送信ボタンが表示されていません。すべてのブラウザ上ですべてを機能させたいので、可能であればJavaScriptを使用したくありません（私が知っている唯一のJSの方法はイベントを使用することです）。

現在のフォームは次のようになります。

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>

これはかなりうまくいきます。ユーザーがEnterキーを押したときに送信ボタンが機能し、ボタンがFirefox、IE、Safari、Opera、およびChromeに表示されません。しかし、それがすべてのブラウザを備えたすべてのプラットフォームで機能するかどうかを知るのは難しいので、私はまだ解決策が好きではありません。

誰かがより良い方法を提案できますか？それともこれはそれが得ると同じくらい良いですか？

htmlformssubmit
293
PythonPower

試してください：

<input type="submit" style="position: absolute; left: -9999px"/>

それは画面の外に、左にボタンを押します。これでいいことは、CSSが無効になっているときには適切に機能が低下することです。

更新 - IE7のための回避策

タブがこのボタンに達するのを防ぐためにtabindexでBryan Downing +によって提案されたように（Ates Goralによる）：

<input type="submit" 
       style="position: absolute; left: -9999px; width: 1px; height: 1px;"
       tabindex="-1" />
225
Ateş Göral

私はあなたがJavascriptルートにするべきであると思う、あるいは少なくとも私はそうする：

<script type="text/javascript">
// Using jQuery.

$(function() {
    $('form').each(function() {
        $(this).find('input').keypress(function(e) {
            // Enter pressed?
            if(e.which == 10 || e.which == 13) {
                this.form.submit();
            }
        });

        $(this).find('input[type=submit]').hide();
    });
});
</script>


<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" />
</form>
93
strager

これを試しましたか？

<input type="submit" style="visibility: hidden;" />

ほとんどのブラウザはvisibility:hiddenを理解していてdisplay:noneのようには実際には動作しないので、私はそれが問題ないはずだと思います。実際に自分でテストしていないので、CMIIWです。

75
andyk

送信ボタンがない別の解決策：

HTML

<form>
  <input class="submit_on_enter" type="text" name="q" placeholder="Search...">
</form>

jQuery

$(document).ready(function() {

  $('.submit_on_enter').keydown(function(event) {
    // enter has keyCode = 13, change it if you want to use another button
    if (event.keyCode == 13) {
      this.form.submit();
      return false;
    }
  });

});
27
damoiser

将来この答えを見ている人のために、HTML5はフォーム要素の新しい属性hiddenを実装しています。これは自動的にあなたの要素にdisplay:noneを適用します。

例えば.

<input type="submit" hidden />
14
Panomosh

次のコードを使用します。これにより、3つすべてのブラウザ（FF、IE、およびChrome）での問題が修正されました。

<input  type="submit" name="update" value=" Apply " 
    style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
    hidefocus="true" tabindex="-1"/>

適切な値の名前と値を使用して、コードの最初の行として上記の行を追加します。

13
Mayank Gupta

現在ボタンを隠すために使っているハックの代わりに、style属性にvisibility: collapse;を設定するほうがずっと簡単です。しかし、フォームを送信するには、まだ少し簡単なJavascriptを使用することをお勧めします。私が理解している限りでは、このようなことへのサポートは今日ではどこにでもあります。

7
Noldorin

Hidden属性をtrueに設定するだけです。

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" hidden="true" />
</form>
7
jumpnett

これを行う最も洗練された方法は送信ボタンを保持することですが、それをボーダー、パディングおよびフォントサイズを0に設定します。

これにより、ボタンの寸法が0x0になります。

<input type="submit" style="border:0; padding:0; font-size:0">

あなたはこれを自分で試すことができます、そして要素にアウトラインを設定することによってあなたはドットを見るでしょう、それは0x0 px要素を「囲む」外側の境界です。

可視性は必要ありません。隠されていますが、夜に眠るようになっている場合は、それをミックスに含めることもできます。

JSフィドル

6
Waltur Buerk

送信ボタンが表示されず、フォームに複数のフィールドがある場合、IEはフォーム送信のためのENTERキーの押下を許可しません。送信ボタンとして1 x 1ピクセルの透明画像を用意して、必要なものを追加します。もちろん、それはレイアウトの1ピクセルを占めるでしょう、しかしあなたがそれを隠すためにあなたがしなければならないことを見てください。

<input type="image" src="img/1x1trans.gif"/>
5
Winston Tamblyn

これは私のソリューションで、Chrome、Firefox 6、IE 7以降でテストされています。

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}
4
vjnrv

最も簡単な方法

<input type="submit" style="width:0px; height:0px; opacity:0;"/>
3
Shahin Mammadzada

あなたもこれを試すことができます

<INPUT TYPE="image" SRC="0piximage.gif" HEIGHT="0" WIDTH="0" BORDER="0">

幅/高さ= 0ピクセルの画像を含めることができます

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

これはうまく機能し、それはあなたが達成しようとしているものの最も明示的なバージョンです。

他のフォーム要素ではdisplay:noneとvisibility:hiddenの間に違いがあることに注意してください。

2
Shammoo

IEに問題がある人のために。

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}
2
Jekis

HTML5ソリューション

<input type="submit" hidden />
0
Andrew Luca

私はそれをドキュメントレディの関数に追加しました。フォームに送信ボタンがない場合（私のすべてのJqueryダイアログフォームに送信ボタンがない場合）、それを追加してください。

$(document).ready(function (){
    addHiddenSubmitButtonsSoICanHitEnter();
});
function addHiddenSubmitButtonsSoICanHitEnter(){
    var hiddenSubmit = "<input type='submit' style='position: absolute; left: -9999px; width: 1px; height: 1px;' tabindex='-1'/>";
    $("form").each(function(i,el){
        if($(this).find(":submit").length==0)
            $(this).append(hiddenSubmit);
    });
}
0
seePatCode