どのように提出するために必要とするリターンキーが押されているか？

StackOverflow https://stackoverflow.com/questions/29943

  •  09-06-2019
  •  | 
  •  

質問

で誰か教えてください提出方法は、HTML形式の場合、returnキーを押しがなければボタンのものです。し、提出ボタンがございません.を使用しているカスタム事業部です。

役に立ちましたか？

解決

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>

よしかし、ご利用の場合はwebブラウザでjavascriptの実行を提出用のカスタムdivるべきものではjavascriptを使用ホームページを作成いたします。定の表示なしスタイルのボタンを押します。このようにユーザーのjavascriptが無効にし、提出ボタンをクリックします。

に注目されている表示になると家を無視し、入力します。を作成しました 新JSFiddle例 始まると標準形、進化を非表示にしの提出と同時に、新たdiv.なんとなく使っていたのCSSスタイリングから StriplingWarrior.

他のヒント

提出の際には、enterキーを押すと作成javascript機能。

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

その後の追加のイベントな範囲で必要なもの例は、divタグ:

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

これもデフォルトの挙動のInternet Explorer7がとにかく(おそらくバージョンにアップデートします）。

また様々な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;
}

性を高めることができ、現在受け答えによるクリスMarasti-ゲオルクが回避 display: none, が正常に動作すべてのブラウザを推奨いたします。

更新

私のブラウザに送信され、上記コードに負の tabindex はしませんのタブキーです。この技術的な検証HTML、図4に示すように、HTML5の仕様を含む言語はそれを動作させるために、多くのブラウザを既に実施していません。

をご利用 <button> タグです。からは、W3C標準：

ボタンをボタン素子の機能のようにボタンの入力要素でより豊かなレンダリングの可能性ボタンの要素があります。例えば、ボタンの要素を含んだ画像の機能が似ての入力要素タイプをクライアントに通知設定"画像"のボタンできます。

基本的には他のタグ <button>, は、 必要としないjavascript, るもの提出が可能です。できる方式を採用しく法及び国際条約により保護されて <div> タグを含む <img /> 内側のボタンタグ).のボタンからの <input /> タグのないほど柔軟性があります。

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

ある種の <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> 要素になります。

このと考えている。

//<![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();
}
//]]>

時のキー押下で、機能豊()が呼び出されます。場合にはキーを押しながら試合の入力キー(13)そのsendform()は呼び出され、最初に検出された形式を送付させていただきます。処理を行うことができFirefoxおよびその他の基準に準拠したブラウザを推奨いたします。

という表示が出ればコードに有用できるものとしてください投票す。

ここではどのようんでjQuery

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

その他のjavascriptの仕方も異なります。のではございますが確認のための打鍵の引数の"13"にenterキー

以下のスクリプト

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

各分野に提出しの際には、ユーザー入力、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>

その結果が、先ほど任天堂さんの方法：

<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キーを押す にする必要があります。

こがね。

んだ、部提出しスタイルを提出ボタン?思いのjavascriptことが望ます。

ご利用の場合asp.net で利用できます defaultButton 属性の形式です。

と思いきって提出ボタンまたは提出をイメージ---いての具体的理由を使用"の提出div"?またカスタムスタイルをお勧めしま <input type="image".... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

同様にクリスMarastiゲオル、例えば、代わりに使用インラインです。基本的に追加onkeypressの分野はそのままにしてenterキーをするのに用いられております。この例では、行為のパスワードます。

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

以降 display: none ボタン入力となるサファリ、すなわち、その最も簡単な方法が必要 なjavascript hacks, は、単に追加する絶対位置づけ <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年.

明らかにその推奨以外から意味的に正しい）だけでなく <button/> してから行ってください。

の"オートフォーカス"属性を作品に入力フォーカスのボタンによるデフォルトです。実はクリックする制御内のもの、要求に対応します。では、"オートフォーカス"させるだけではできない場合、ユーザーなクリックその他の制御のです。

では、"オートフォーカスすることによって、大きな違いはユーザがクリックしいずれの形態制御なります。

そしてまだ2つの条件を満たす事なくJS:

a)ご指定のページに行く場合は空になりそもそも太陽系つ。私の例でhello.php

b)管理が見えることになります。お考えを移動すると、ページを非表示ができないディスプレイを使用した視認性:非表示になります。なかったため、使用インラインのスタイルで移動すると、ページ左200px×.また、高0pxようになりません。なのでまだ混乱が他のコントロール。またfloatの要素です。

<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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top