Evite dispensar modal ao pressionar a tecla Enter

107

Eu configurei um modal de bootstrap com um formulário dentro dele, só notei que quando pressiono a tecla Enter, o modal é dispensado. Existe uma maneira de não dispensá-lo ao pressionar Enter?

Tentei ativar o modal com o teclado: falso, mas isso só impede a dispensa com a tecla ESC.

Luke Morgan
fonte
Eu gosto dessa pergunta. Por que não apenas editar o código-fonte do plugin?
Ryan
Vou dar uma olhada nisso, se achar algo útil, vou editar. Enquanto isso, espero que alguém saiba a resposta.
Luke Morgan
Mudei de click.dismiss.modal para keyup, parece bom, vou verificar novamente mais tarde para ver se estraguei alguma coisa
Luke Morgan
Sim, isso bagunçou os botões (adicionei um onclick = "$ ('# signinModal'). Modal ('hide');" para evitar esses problemas, agora está tudo bem, ao que parece)
Luke Morgan

Respostas:

121

Eu também tive esse problema.
Meu problema era que eu tinha um botão Fechar no meu modal

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

Pressionar enter no campo de entrada fez com que este botão fosse disparado. Em vez disso, mudei para uma âncora e agora funciona como esperado (enter envia o formulário e não fecha o modal).

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

Sem ver sua fonte, não posso confirmar se sua causa é a mesma.

vish
fonte
Não, sem botões usados, usei os itens <a>, acho que é outra coisa. O código que uso é basicamente o código de amostra na página de bootstrap, apenas com um formulário adicionado dentro
Luke Morgan
Não vi o botão no canto superior direito, esse era o problema. Agora funciona bem, obrigado!
Luke Morgan
1, Excelente achado! Será que alguém colocou isso no rastreador de problemas de bootstrap? Estou com preguiça de verificar no momento. Talvez depois do almoço.
Andrew
8
Este não é apenas um problema de botão. Eu removi todos os botões do meu modal (incluindo o "x" superior direito), mas se eu tiver um único campo de texto de formulário, pressionar Enter irá fechar a caixa de diálogo. Estranhamente, só é um problema quando há um único campo de texto. Uma vez que eu tenho dois, o Enter não descarta o modelo, não importa qual campo tenha o foco.
jpeskin
11
pode-se usar type = "button" no botão cancelar
Muayyad Alsadi
77

Basta adicionar o atributo type = "button" ao elemento de botão, alguns navegadores interpretam o tipo como envio por padrão.

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

Isso se aplica a todos os botões que você possui no modal.

<button type="button" class="close" data-dismiss="modal">×</button>
jcalonso
fonte
19

Eu tive esse problema mesmo depois de remover TODOS os botões do meu Bootstrap Modal, então nenhuma das soluções aqui me ajudou.

Descobri que um formulário com um único campo de texto faria com que o navegador enviasse um formulário (e resultaria em dispensar), se você pressionasse Enter enquanto o foco do teclado estivesse no campo de texto. Isso parece ser mais um problema de navegador / formulário do que qualquer coisa com o Bootstrap.

Minha solução foi definir o atributo onsubmit do formulário para onsubmit = "return false"

Isso pode ser um problema se você estiver realmente usando o evento submit, mas estou usando estruturas JS que geram solicitações AJAX em vez de enviar um navegador, então prefiro desabilitar totalmente o submit. (Isso também significa que não preciso ajustar manualmente cada elemento do formulário que pode acionar um envio).

Mais informações aqui: Diálogos modais de bootstrap com um único campo de entrada de texto sempre dispensados ​​na tecla Enter

jpeskin
fonte
2
Eu já tinha type="button"em todos os meus botões fechar / cancelar, mas ainda tinha esse problema com a tecla Enter fechando meu modal. Eu tinha apenas 1 campo de texto de entrada no meu modal e sua solução corrigiu isso. Obrigado pela sua resposta!
Darren Parker
7

Você pode colocar o botão de login antes do botão cancelar e isso resolveria o problema que você está tendo também.

<div class="modal-footer">
    <button type="submit" class="btn primary">Login</button>
    <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
Ryan
fonte
6
Cancelar não deve ser enviado por tipo
Manatax
5

Eu tive o mesmo problema, e resolvi com

<form onsubmit="return false;">

mas há mais uma solução, você pode adicionar uma entrada invisível fictícia, para que seu formulário fique assim:

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

Tive uma experiência semelhante agora e a forma como resolvi foi, em vez de usar uma tag, mudei a tag para uma tag com type = "botão". Isso pareceu resolver o problema de pressionar a tecla "enter" e descartar o modal de bootstrap.

wmock
fonte
2

Eu também tive esse problema e resolvi dessa forma. Eu adicionei onsubmit ao formulário. Eu também queria ser capaz de usar a tecla enter como chave de salvamento, então adicionei save_stuff () javascript ao onsubmit. retorna falso; é usado para evitar o envio do formulário.

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

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