さて、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では表示されません。ただし、すべてのブラウザを備えたすべてのプラットフォームで機能するかどうかを判断するのが難しいため、私はまだソリューションが好きではありません。

誰もがより良い方法を提案できますか？それとも、これで十分ですか？

試してください：

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

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

アップデート-IE7の回避策

ブライアン・ダウニング+が示唆しtabindexているように、タブがこのボタンに到達するのを防ぐため（アテス・ゴラルによる）：

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

私はあなたが 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>

これを試しましたか？

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

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

送信ボタンのない別のソリューション：

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;
    }
  });

});

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

例えば

<input type="submit" hidden />

次のコードを使用すると、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"/>

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

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

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>

これを行う最もエレガントな方法は、送信ボタンを維持することですが、境界線、パディング、フォントサイズを0に設定します。

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

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

これを自分で試すことができます。要素にアウトラインを設定すると、ドットが表示されます。これは、0x0 px要素を「囲む」外側の境界線です。

可視性は必要ありません。非表示ですが、夜に眠るようになっている場合は、ミックスに入れることもできます。

JSフィドル

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

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

これは私の解決策であり、Chrome、Firefox 6、IE7 +でテストされています。

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

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

これは正常に機能し、達成しようとしていることの最も明示的なバージョンです。

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

HTML5ソリューション

<input type="submit" hidden />

最も簡単な方法

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

IEに問題がある人や他の人にも。

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

これも試すことができます

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

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

一連のUIフレームワークを使用しています。それらの多くには、視覚的に物事を隠すために使用できる組み込みクラスがあります。

ブートストラップ

<input type="submit" class="sr-only" tabindex="-1">

角材

<input type="submit" class="cdk-visually-hidden" tabindex="-1">

これらのフレームワークを作成した素晴らしい心は、これらのスタイルを次のように定義しています。

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

ドキュメントの機能に追加しました。フォームに送信ボタンがない場合（私のすべての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);
    });
}

input.on('keypress', function(event) {
    if ( event.which === 13 ) {
        form.submit();
        return false;
    }
});

私は使用しました：

<input class="hidden" type="submit" value="" 
onclick="document.getElementById('loginform').submit();"/>

そして：

 .hidden {
        border:0;
        padding:0;
        font-size:0;
        width: 0px;
        height: 0px;
    }

.cssファイル内。私にとっても魔法のように機能しました。:)