2012-05-01 54 views
94

He configurado un modal de arranque con un formulario dentro, me acabo de dar cuenta de que cuando presiono la tecla Enter, el modal se descarta. ¿Hay alguna manera de no descartarlo al presionar Entrar?Evitar el descarte modal al presionar enter

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

+0

I como esta pregunta ¿Por qué no solo editas el código fuente del complemento? –

+0

Echaré un vistazo a eso, si encuentro algo útil lo editaré. Mientras tanto, espero que alguien sepa la respuesta. –

+0

pasé de click.dismiss.modal a keyUp, parece bien, voy a comprobar de nuevo más tarde para ver si la he cagado otra cosa –

Respuesta

103

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

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

presionar entra en el campo de entrada causado este botón para ser disparado. En su lugar, lo cambié a anclaje y funciona como se espera ahora (enter envía el formulario y no cierra el modal).

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

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

7

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

<div class="modal-footer"> 
    <button type="submit" class="btn primary">Login</button> 
    <button type="submit" class="btn" data-dismiss="modal">Cancel</button> 
</div> 
+3

Cancelar no debe ser de tipo submit – Manatax

+0

sin esto no resuelve el problema – DvdEnde

71

Basta con añadir el type = "button" atributo al elemento botón, algunos navegadores interpretan el tipo que presentar por defecto.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes

Esto se aplica para todos los botones que tiene en el modal.

<button type="button" class="close" data-dismiss="modal">×</button> 
+0

Tan simple y obvia en retrospectiva, me salvó un enorme dolor de cabeza – DerekH

+0

Este ... gran respuesta. – Leprosy

+0

¡¡excelente respuesta !!!! –

16

he tenido este problema incluso después de la eliminación de todos los botones de mi rutina de carga modal, por lo que ninguna de las soluciones que aquí me ayudó.

Encontré que un formulario con un solo campo de texto provocaría que el navegador realizara un envío de formulario (y que lo descartara), si presiona Entrar 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 de onsubmit del formulario a onSubmit = "return false"

Esto puede ser un problema si usted está utilizando realmente el evento submit, pero estoy usando marcos JS que generan peticiones AJAX en vez que hacer un envío de navegador, por lo que prefiero deshabilitar enviar por completo. (También significa que no tengo que ajustar manualmente cada elemento de formulario que pueda desencadenar un envío).

Más información aquí: Bootstrap modal dialogs with a single text input field always dismiss on Enter key

+1

Ya tenía 'type =" button "' en todos mis botones de cerrar/cancelar, pero todavía tenía este problema con la tecla enter para cerrar mi modal. Solo tenía 1 campo de entrada de texto en mi modal, y su solución lo solucionó. ¡Gracias por tu respuesta! –

2

tuve este problema también y lo resolvió de esta manera. Añadí onsubmit a la forma. También quería poder usar la tecla enter como una tecla de guardado, así que agregué save_stuff() javascript a onsubmit. falso retorno; se usa para evitar que se envíe el formulario.

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

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

tuve una experiencia similar en este momento y la forma en que resolvió que era en lugar de utilizar una etiqueta, que cambió la etiqueta a una etiqueta con el tipo "botón" =. Esto pareció resolver el problema de presionar la tecla "enter" y descartar el modo de arranque.

4

que tenía el mismo problema, y ​​lo resolví con

<form onsubmit="return false;"> 

pero hay una solución más, puede agregar la entrada invisible ficticia, por lo que su forma 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> 
Cuestiones relacionadas