85

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

4

15 に答える 15

90

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

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

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

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

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

于 2008-08-27T12:18:18.290 に答える
66

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スタイルを使用しました。

于 2008-08-27T12:38:30.893 に答える
55

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

<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、タブ キーをキャプチャしないようにしました。これは技術的に HTML 4 では検証されませんが、HTML5 仕様には、ほとんどのブラウザーが既に実装している方法で動作させるための言語が含まれています。

于 2011-07-06T20:50:04.563 に答える
16

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

BUTTON 要素で作成されたボタンは、INPUT 要素で作成されたボタンと同じように機能しますが、より豊富なレンダリングの可能性を提供します。BUTTON 要素にはコンテンツが含まれる場合があります。たとえば、画像を含む BUTTON 要素は、タイプが「画像」に設定されている 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 を作成できることに注意してください。<a class="button"><button>

于 2011-11-17T08:21:23.457 に答える
9

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

//<![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() が呼び出されます。押されたキーがエンター キー (13) と一致する場合、sendform() が呼び出され、最初に検出されたフォームが送信されます。これは、Firefox およびその他の標準準拠のブラウザー専用です。

このコードが役に立つと思ったら、投票してください!

于 2011-12-13T14:56:10.343 に答える
7

これがjQueryで行う方法です

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

他の JavaScript もそれほど変わらないでしょう。キャッチは、入力キーである「13」のキープレス引数をチェックしています

于 2008-08-27T12:07:49.423 に答える
6

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

<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>
于 2008-08-27T12:14:47.817 に答える
2

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

<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>

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

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

これがトリックです！

于 2012-03-26T12:28:02.100 に答える
0

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

于 2008-08-27T13:16:27.667 に答える
0

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

于 2008-08-28T09:10:47.157 に答える
0

div 送信スタイルを送信ボタンに適用してみませんか? これにはjavascriptがあると確信していますが、それは簡単です。

于 2008-08-27T11:58:08.993 に答える