title: Trigger onClick event when Enter keypress in a Twitter Bootstrap Modal
body: <p>I've a few modals build on top of Twitter Bootstrap Modal, each have at least <em>one</em> submit button which is the default action I need to trigger in most cases since the second button is for go back (dismiss the modal), how, on a modal, when I hit enter I can trigger whatever action that submit has? For example right now, as they are button I have something like:</p>
  
  <pre><code>$("#btn").on("click", function(e){
      e.preventDefault(); // wait... not send form yet, will be a Ajax call
  });
  </code></pre>
  
  <p>Any help? Example code?</p>
  
  <p>For reference, this is the modal content (I using with Twig as part of a Symfony2 project so don't worry about <code>{{ }}</code>):</p>
  
  <pre><code>&lt;div class="modal fade " id="addNorma" tabindex="-1" role="dialog" aria-labelledby="addNorma" aria-hidden="true"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;{{ 'boton.cerrar'|trans({}, 'AppBundle') }}&lt;/span&gt;&lt;/button&gt;
                  &lt;h4 class="modal-title" id="myModalLabel"&gt;{{ 'modal.normas.titulo'|trans({}, 'AppBundle') }}&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;form id="buscadorNorma" method="POST"&gt;
                      &lt;div class="spacer10"&gt;&lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-5 col-lg-5 col-sm-5 col-xs-5"&gt;
                              &lt;label for="codigo_norma"&gt;{{ 'modal.normas.codigo'|trans({}, 'AppBundle') }}&lt;/label&gt;
                              &lt;input type="text" class="form-control" id="codigo_norma" name="codigo_norma" placeholder="{{ 'modal.normas.codigoPlaceholder'|trans({}, 'AppBundle') }}"&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-5 col-lg-5 col-sm-5 col-xs-5 col-md-offset-2"&gt;
                              &lt;label for="ano_publicacion"&gt;{{ 'modal.normas.anno'|trans({}, 'AppBundle') }}&lt;/label&gt;
                              &lt;input type="text" class="form-control" id="ano_publicacion" name="ano_publicacion" placeholder="{{ 'modal.normas.annoPlaceholder'|trans({}, 'AppBundle') }}"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="spacer10"&gt;&lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-12"&gt;
                              &lt;label for="nombre_norma"&gt;{{ 'modal.normas.term'|trans({}, 'AppBundle') }}&lt;/label&gt;
                              &lt;input type="text" class="form-control" id="nombre_norma" name="nombre_norma" placeholder="{{ 'modal.normas.termPlaceholder'|trans({}, 'AppBundle') }}"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="spacer10"&gt;&lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-12"&gt;
                              &lt;label for="procedencia_producto"&gt;{{ 'modal.normas.comite'|trans({}, 'AppBundle') }}&lt;/label&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;div&gt;
                                      &lt;select name="comite_tecnico" id="comite_tecnico" class="form-control toSelect2"&gt;
                                          &lt;option value="" selected="selected"&gt;{{ 'seleccioneOpcion'|trans({}, 'AppBundle') }}&lt;/option&gt;
                                          {% for key, item in comiteTecnico %}
                                              &lt;option value="{{ key }}"&gt;{{ item.nombre }}&lt;/option&gt;
                                          {% endfor %}
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="spacer5"&gt;&lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-12"&gt;
                              &lt;button type="button" class="btn btn-default pull-right" disabled="disabled" id="btnBuscarNorma"&gt;&lt;i class="fa fa-binoculars"&gt;&lt;/i&gt; {{ 'boton.buscar'|trans({}, 'AppBundle') }}&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
                  &lt;div class="spacer10"&gt;&lt;/div&gt;
                  &lt;table  class="table table-hover table-condensed" id="resultadoNorma" style="display: none"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;&lt;input type="checkbox" id="toggleCheckboxNorma" name="toggleCheckboxNorma" /&gt;&lt;/th&gt;
                              &lt;th&gt;{{ 'columnas.normas.no'|trans({}, 'AppBundle') }}&lt;/th&gt;
                              &lt;th&gt;{{ 'columnas.normas.norma'|trans({}, 'AppBundle') }}&lt;/th&gt;
                              &lt;th&gt;{{ 'columnas.normas.anno'|trans({}, 'AppBundle') }}&lt;/th&gt;
                              &lt;th&gt;{{ 'columnas.normas.comite'|trans({}, 'AppBundle') }}&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody id="resultadoNormaBody"&gt;&lt;/tbody&gt;
                  &lt;/table&gt;
                  &lt;div class="alert alert-danger" role="alert" style="display: none;" id="sinResultadosBuscarNormas"&gt;
                      {{ 'mensajes.msgNoEncontrado'|trans({}, 'AppBundle') }}
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;{{ 'boton.regresar'|trans({}, 'AppBundle') }}&lt;/button&gt;
                  &lt;button type="submit" class="btn btn-primary" id="btnAplicarNorma" disabled="disabled"&gt;&lt;i class="fa fa-save"&gt;&lt;/i&gt; {{ 'boton.aplicar'|trans({}, 'AppBundle') }}&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And that's the code I trigger when I click on <code>#btnBuscarNorma</code>:</p>
  
  <pre><code>$('button#btnBuscarNorma').on('click', function (ev) {
      ev.preventDefault();
      $.post(Routing.generate('filtrarNormas'), $('#buscadorNorma').serialize(), 'json')
          .done(function (data, textStatus, jqXHR) {
              $('#resultadoNorma').toggle(!!data.entities.length);
              $("#sinResultadosBuscarNormas").toggle(!data.entities.length);
  
              if (data.entities.length &gt; 0) {
                  var $html = '';
                  data.entities.forEach(function (value, index, array) {
                      $html += '&lt;tr&gt;';
                      $html += '&lt;td&gt;&lt;input type="checkbox" id="' + value.id + '" value="' + value.id + '"&gt;&lt;/td&gt;';
                      $html += '&lt;td&gt;' + value.codigo + '&lt;/td&gt;';
                      $html += '&lt;td&gt;' + value.norma + '&lt;/td&gt;';
                      $html += '&lt;td&gt;' + value.anno + '&lt;/td&gt;';
                      $html += '&lt;td&gt;' + value.comiteTecnico + '&lt;/td&gt;';
                      $html += '&lt;/tr&gt;';
                  });
  
                  $("table tbody#resultadoNormaBody").html($html);
                  marcarTodosCheck('#toggleCheckboxNorma', '#resultadoNormaBody');
              }
          });
  });
  </code></pre>
  
  <p>The idea is <code>Enter</code> key will trigger <code>#btnBuscarNorma</code> click event and not <code>#btnAplicarNorma</code> click event.</p>