Le finestre di dialogo modali di avvio con un singolo campo di testo si ignorano sempre sul tasto Invio

Question

Perché questa finestra di dialogo modale semplice con un campo di testo (e pulsanti NO) non si chiude quando lo stato attivo è sul campo e viene premuto Invio?

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

C'è ampia discussione here che suggerisce si tratta di un problema di tasto (io ho messo tipo "pulsante" = sul tasto e di ancoraggio tag. Ho convertito tag pulsante per ancore). Tuttavia, ho provato tutte le soluzioni proposte e ho finito per commentare completamente i pulsanti, e succede ancora.

Si noti che se semplicemente duplicare lo stesso input di testo e hanno due campi, il problema va via (concentrandosi su uno dei due campi di testo non causerà il licenziamento su Invio)

Answer 1

Grazie a @mccannf per avermi nella giusta direzione. Questo sembra essere un modulo di invio più generale rispetto a qualsiasi cosa specifica di Bootstrap. Due soluzioni:

1. Impostare l'attributo onsubmit del modulo su onsubmit = "return false;" (https://stackoverflow.com/a/1329168/569091)

mi piace questa soluzione il meglio come sembra difficile prevedere (ed è forse il browser dipendente) che i campi del modulo possono o non possono innescare un modulo di presentare sul digitando Invio.

Così, nel mio esempio dalla domanda iniziale:

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

2. Impostare l'onkeydown (o onKeyUp?) Attribuire a restituire false quando event.keyCode == 13 (https://stackoverflow.com/a/2037935/569091) In questo link, onkeyup lavorato, ma ho dovuto usare onKeyDown (browser dipendente?)

Così, nel mio esempio dalla domanda iniziale:

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

Answer 2

E 'solo per chiarire la risposta prima e rispondere al commento di raykin.

1. Impostare l'attributo onsubmit del modulo su onsubmit = "return false;" (https://stackoverflow.com/a/1329168/569091)

Questa soluzione è utile quando si controlla il submit della form javascript come esempio

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

Come si può vedere di fare una forma presentare è attraverso la chiamata jquery onclick del pulsante salva ID.

Ma se si desidera aggiungere l'azione per formare tag, allora forse si devono utilizzare la seconda soluzione

2. Impostare l'onkeydown (o onKeyUp?) Attributo di restituire false quando event.keyCode == 13 (https://stackoverflow.com/a/2037935/569091)

A mio parere, non mi piace questa soluzione nel caso in cui si desideri creare la forma dinamicamente.

Answer 3

Solo un commento a Mara Jimenez messaggio:

C'è un altro modo di usare tag azione, e di non giocare con gli eventi. È possibile aggiungere un input invisibile fittizio nel modulo e il tasto Invio non lo invia. Qui è campione:

<form role="form" method="post" action="submitform.php"> 
    <input type="text" id="name" name="name" > 
    <input type="text" style="display: none;"> 
</form>