10

フォーカスがフィールドにあり、Enter キーが押されたときに、1 つのテキスト フィールド (およびボタンなし) を持つこの単純なモーダル ダイアログが閉じるのはなぜですか?

<a href="#dlgAddDeviceFolder" class="add-device-folder" data-toggle="modal">New Folder</a>

<div id="dlgAddDeviceFolder" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="dlgAddFolderLabel" aria-hidden="true">
  <div class="modal-header">
    <!--<a type="button" class="close" data-dismiss="modal" aria-hidden="true">×</a>-->
    <h3 id="myModalLabel">Add Device Folder</h3>
  </div>

  <div class="modal-body">
    <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="dlgAddDeviceFolder_name">Folder Name</label>
        <div class="controls">
          <input id="dlgAddDeviceFolder_name" type="text" placeholder="Folder Name" autocomplete="off">
        </div>
      </div>
    </form>
  </div>

  <div class="modal-footer">
    <!--<a type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>-->
    <!--<a id="dlgAddDeviceFolder_btnOk" type="button" class="btn btn-primary">OK</a>-->
  </div>
</div>

ここでは、ボタンの問題であることを示唆する広範な議論があります (ボタン タグとアンカー タグに type="button" を配置しました。ボタン タグをアンカーに変換しました)。ただし、提案されたすべてのソリューションを試した後、ボタンを完全にコメントアウトするだけになりましたが、それでも発生します。

同じテキスト入力を単純に複製して 2 つのフィールドがある場合は、問題がなくなることに注意してください (どちらかのテキスト フィールドにフォーカスしても、Enter キーで閉じられることはありません)。

4

3 に答える 3

14

正しい方向に向けてくれた@mccannfに感謝します。これは、Bootstrap に固有のものよりも、より一般的なフォーム送信の問題のようです。2 つのソリューション:

1. フォームの onsubmit 属性を onsubmit="return false;" に設定します。 ( https://stackoverflow.com/a/1329168/569091 )

Enter を入力したときにどのフォーム フィールドがフォーム送信をトリガーするか、またはトリガーしないかを予測するのは難しい (おそらくブラウザーに依存する) ため、このソリューションが最も気に入っています。

したがって、元の質問からの私の例では:

<form class="form-horizontal" onsubmit="return false">

2. onkeydown (または onkeyup?) 属性を設定して、event.keyCode == 13 ( https://stackoverflow.com/a/2037935/569091 ) のときに false を返すようにします。このリンクでは、onkeyup は機能しましたが、onkeydown を使用する必要がありました (ブラウザ依存？）

したがって、元の質問からの私の例では:

function ignoreEnter(event)
{
  if (event.keyCode == 13) {
    return false;
  }
}

// and this in the HTML
<input id="dlgAddDeviceFolder_name" type="text" placeholder="Folder Name" onkeydown="return ignoreEnter(event);">
于 2013-03-06T18:56:46.847 に答える