Evite el descarte modal al presionar la tecla Intro

107

He configurado un modal de arranque con un formulario dentro, acabo de notar que cuando presiono la tecla Intro, el modal se descarta. ¿Hay alguna forma de no descartarlo al presionar Enter?

Intenté activar el modal con el teclado: falso, pero eso solo evita el despido con la tecla ESC.

Luke Morgan
fuente
Me gusta esta pregunta. ¿Por qué no editar el código fuente del complemento?
Ryan
Echaré un vistazo a eso, si encuentro algo útil, lo editaré. Mientras tanto, espero que alguien sepa la respuesta.
Luke Morgan
Cambié de click.dismiss.modal a keyup, parece estar bien, lo comprobaré más tarde para ver si arruiné algo más
Luke Morgan
Sí, eso arruinó los botones (agregué un onclick = "$ ('# signinModal'). Modal ('hide');" para evitar esos problemas, ahora todo está bien, parece)
Luke Morgan

Respuestas:

122

Yo también tuve este problema.
Mi problema era que tenía un botón de cierre en mi modal

<button class="close" data-dismiss="modal">&times;</button>

Al presionar enter en el campo de entrada, este botón se disparó. Lo cambié a un ancla en su lugar y ahora funciona como se esperaba (ingresar envía el formulario y no cierra el modal).

<a class="close" data-dismiss="modal">&times;</a>

Sin embargo, sin ver su fuente, no puedo confirmar que su causa sea la misma.

vish
fuente
No, no usé botones, usé los elementos <a>, supongo que es otra cosa. El código que uso es básicamente el código de muestra en la página de arranque, solo con un formulario agregado adentro
Luke Morgan
No vi el botón en la esquina superior derecha, ese era el problema. ¡Ahora funciona bien, gracias!
Luke Morgan
+1, excelente hallazgo! Me pregunto si alguien ha puesto esto en el rastreador de problemas de arranque. Soy demasiado vago para comprobarlo en este momento. Quizás después del almuerzo.
Andrew
8
Esto no es solo una cuestión de botones. He eliminado todos los botones de mi modal (incluida la "x" superior derecha), pero si tengo un solo campo de texto de formulario, al presionar Enter se cerrará el diálogo. Curiosamente, solo es un problema cuando hay un solo campo de texto. Una vez que tengo dos, Enter no descarta el modelo sin importar qué campo tenga el foco.
jpeskin
11
se puede usar type = "button" en el botón cancelar
Muayyad Alsadi
19

Tuve este problema incluso después de eliminar TODOS los botones de mi Bootstrap Modal, por lo que ninguna de las soluciones aquí me ayudó.

Descubrí que un formulario con un solo campo de texto haría que el navegador hiciera un envío de formulario (y resultara en descartarlo), si presiona Enter mientras el foco del teclado está en el campo de texto. Esto parece ser más un problema de navegador / formulario que cualquier cosa con Bootstrap.

Mi solución fue establecer el atributo onsubmit del formulario en onsubmit = "return false"

Esto puede ser un problema si realmente está utilizando el evento de envío, pero estoy usando marcos JS que generan solicitudes AJAX en lugar de hacer un envío del navegador, por lo que prefiero deshabilitar el envío por completo. (También significa que no tengo que modificar manualmente todos los elementos del formulario que puedan desencadenar un envío).

Más información aquí: los cuadros de diálogo modal de Bootstrap con un solo campo de entrada de texto siempre se descartan en la tecla Intro

jpeskin
fuente
2
Ya tenía type="button"todos mis botones de cerrar / cancelar, pero todavía tenía este problema con la tecla Intro para cerrar mi modal. Tenía solo 1 campo de texto de entrada en mi modal y su solución lo solucionó. ¡Gracias por tu respuesta!
Darren Parker
7

Puede poner el botón de inicio de sesión antes del botón de cancelar y esto también resolvería el problema que tiene.

<div class="modal-footer">
    <button type="submit" class="btn primary">Login</button>
    <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
Ryan
fuente
6
Cancelar no debe escribirse enviar
Manatax
5

Tuve el mismo problema y lo resolví con

<form onsubmit="return false;">

pero hay una solución más, puede agregar una entrada invisible ficticia, por lo que su formulario se vería así:

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

Tuve una experiencia similar en este momento y la forma en que lo resolví fue en lugar de usar una etiqueta, cambié la etiqueta a una etiqueta con type = "button". Esto pareció resolver el problema de presionar la tecla "enter" y descartar el modal de arranque.

wmock
fuente
2

Yo también tuve este problema y lo resolví de esta manera. Agregué onsubmit al formulario. También quería poder usar la tecla enter como una clave para guardar, así que agregué save_stuff () javascript a onsubmit. falso retorno; se utiliza para evitar el envío del formulario.

<form onsubmit="save_stuff(); return false;">
 ...
</form>

<script>
    function save_stuff(){
      //Saving stuff
    }
</script>
Firze
fuente