Bootstrap-modal-Dialoge mit einem einzelnen text-input-Feld immer entlassen Enter-Taste

Warum funktioniert dieser einfache modale Dialogfenster mit einem Textfeld (und KEINE Tasten) entlassen, wenn der Fokus auf dem Feld und Enter gedrückt wird?

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

Gibt es eine umfassende Diskussion hier, die nahelegt, dass es ist ein button-Problem (ich habe type="button" auf-Taste und Anker-tags. Ich habe Umgerechnet button-tags zu Ankern). Jedoch, ich habe versucht, alle Lösungen vorgeschlagen und dann landete Sie nur komplett auskommentieren die Tasten, und es passiert immer noch.

Beachten Sie, dass wenn Sie einfach duplizieren Sie die gleichen text-input und haben zwei Felder, verschwindet das problem (mit dem Fokus auf entweder text-Feld wird nicht dazu führen, die Entlassung auf Enter)

Die Antwort auf diese Frage helfen könnte: stackoverflow.com/questions/2037910/...

InformationsquelleAutor jpeskin | 2013-03-06

12

Dank @mccannf für den Hinweis mich in die richtige Richtung. Dies scheint eine mehr Allgemeine form-submit-Problem als etwas bestimmtes zu Bootstrap. Zwei Lösungen:

1. Legen Sie das Formular "onsubmit" - Attribut onsubmit="return false;"
(https://stackoverflow.com/a/1329168/569091)

Ich mag diese Lösung die beste, wie es scheint, schwer zu sagen (und ist wohl browser-abhängig) die Formularfelder können oder nicht auslösen, ein Formular einzureichen, auf die Eingabe von Enter.

So, in meinem Beispiel von der ursprünglichen Frage:
```
<form class="form-horizontal" onsubmit="return false">
```
2. Legen Sie die onkeydown (oder onkeyup?) Attribut den Wert false zurück, wenn die Veranstaltung.keyCode == 13
(https://stackoverflow.com/a/2037935/569091)
In diesem link, onkeyup funktioniert, aber ich musste onkeydown (browser-abhängig?)

So, in meinem Beispiel von der ursprünglichen Frage:
```
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);">
```
- die erste Lösung nicht funktioniert für mich, meine form war <form accept-charset="UTF-8" action="/Einladungen" class="form-stacked" data-remote="true" id="invitation_form" method="post" onsubmit="return false;">, nach google, ich denke die Lösung war nicht funktioniert, in Firefox und Chrome
InformationsquelleAutor jpeskin
6

Seine nur zu klären, die Antwort vor und reagieren auf die raykin Kommentar.

1. Legen Sie das Formular "onsubmit" - Attribut onsubmit="return false;" (https://stackoverflow.com/a/1329168/569091)

Diese Lösung ist nützlich, wenn Sie kontrollieren das Absenden des Formulars durch den javascript-Code als ein Beispiel
```
<div class="modal hide fade" tabindex="-1">
 <div class="modal-header">
      <button class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">{% trans "Create" %}</h3>
  </div>
  <div class="modal-body">
       <form method="POST" class="form-horizontal" onsubmit="return false">
           <input id="id_name" maxlength="250" name="name" type="text">
       </form>
  </div>
  <div class="modal-footer">
    <button id="save-button" class="btn">{% trans "Save" %}</button>
    <button class="btn" aria-hidden="true">{% trans "Cancel" %}</button>
  </div>
</div>

<script>
    $('#save-button').on('click', function(){
        //TODO add ajax call
    });
</script>
```
Wie Sie sehen können zu tun, ein Formular einzureichen ist durch den jquery-Aufruf onclick der Schaltfläche save id.

Aber wenn Sie möchten, fügen Sie die Aktion zu form-tag, dann haben Sie vielleicht haben, verwenden Sie die zweite Lösung

2. Legen Sie die onkeydown (oder onkeyup?) Attribut den Wert false zurück, wenn die Veranstaltung.keyCode == 13 (https://stackoverflow.com/a/2037935/569091)

Meiner Meinung nach, ich dont wie diese Lösung im Fall, dass Sie wollen, um die form zu erstellen dinamically.

InformationsquelleAutor Mara Jimenez
5

Nur einen Kommentar zu Mara Jimenez post:

Gibt es eine andere Möglichkeit mit action-tag, und nicht zu spielen, um mit Veranstaltungen. Sie können hinzufügen dummy unsichtbar input in form, und die Enter-Taste würde nicht senden Sie es ab. Hier ist Beispiel:
```
<form role="form" method="post" action="submitform.php">
    <input type="text" id="name" name="name" >
    <input type="text" style="display: none;">
</form>
```
InformationsquelleAutor Igor Lovrić

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.