Eu tenho uma página com dois botões. Um é um <button>
elemento e o outro é um <input type="submit">
. Os botões aparecem na página nessa ordem. Se eu estiver em um campo de texto em qualquer lugar do formulário e pressionar <Enter>
, o click
evento do elemento button será acionado. Presumo que é porque o elemento button fica em primeiro lugar.
Não consigo encontrar nada que pareça uma maneira confiável de definir o botão padrão, nem quero necessariamente neste momento. Na ausência de algo melhor, capturei uma tecla pressionada em qualquer lugar do formulário e, se foi a <Enter>
tecla pressionada, estou negando:
$('form').keypress( function( e ) {
var code = e.keyCode || e.which;
if( code === 13 ) {
e.preventDefault();
return false;
}
})
Até onde eu sei até agora, parece estar funcionando, mas parece incrivelmente maluco.
Alguém conhece uma técnica mais sofisticada para fazer isso?
Da mesma forma, existem armadilhas para esta solução das quais simplesmente não estou ciente?
Obrigado.
Respostas:
Usando
deve fazer o truque.
O motivo é que um botão dentro de um formulário tem seu tipo definido implicitamente
submit
. Como diz o zzzzBoz, o Spec diz que o primeirobutton
ou oinput
comtype="submit"
é o que é acionado nessa situação. Se você definir especificamentetype="button"
, ele será removido de consideração pelo navegador.fonte
type="button"
parece resolver isso ... Obrigado! ps alguma idéia de por que isso é? ie8 tratando botões como tipo enviar? Esquisito.<input type="submit"/>
(acionará o clique) e<input type="button"/>
(não acionará o clique) #É importante ler as especificações HTML para entender realmente qual é o comportamento esperado:
A especificação HTML5 afirma explicitamente o que acontece em
implicit submissions
:Isso não foi explicitado na especificação HTML4, no entanto, os navegadores já estão implementando o que é descrito na especificação HTML5 (e é por isso que é incluído explicitamente).
Edite para adicionar:
A resposta mais simples que consigo pensar é colocar o botão de envio como o primeiro
[type="submit"]
item no formulário, adicionar preenchimento na parte inferior do formulário com css e posicionar absolutamente o botão de envio na parte inferior, onde você desejar.fonte
Eu não acho que você precise de javascript ou CSS para corrigir isso.
De acordo com a especificação html 5 para botões, um botão sem atributo de tipo é tratado da mesma forma que um botão com seu tipo definido como "enviar", ou seja, como um botão para enviar seu formulário. Definir o tipo do botão como "botão" deve impedir o comportamento que você está vendo.
Não tenho certeza sobre o suporte ao navegador para isso, mas o mesmo comportamento foi especificado na especificação html 4.01 para botões, então espero que seja muito bom.
fonte
Ao pressionar 'Enter' no foco,
<input type="text">
você aciona o evento 'click' no primeiro elemento posicionado:<button>
ou<input type="submit">
. Se você pressionar 'Enter'<textarea>
, basta criar uma nova linha de texto.Veja o exemplo aqui .
Seu código impede a inserção de uma nova linha de texto
<textarea>
, portanto, você deve pressionar apenas a tecla<input type="text">
.Mas por que você precisa pressionar
Enter
no campo de texto? Se você deseja enviar o formulário pressionando 'Enter', mas ele<button>
deve permanecer o primeiro no layout, basta brincar com a marcação: coloque o<input type="submit">
código antes do<button>
e use CSS para salvar o layout necessário.Capturando 'Enter' e salvando a marcação:
fonte
Onde quer que você use um
<button>
elemento por padrão, ele considera esse botão;type="submit"
portanto, se você definir o botãotype="button"
, ele não será considerado<button>
como botão de envio.fonte
Pressionar enter no campo de texto de um formulário enviará, por padrão, o formulário. Se você não deseja que ele funcione dessa maneira, é necessário capturar a tecla Enter e consumi-la como você fez. Não há como contornar isso. Funcionará dessa maneira, mesmo se não houver um botão presente no formulário.
fonte
click
ação na elementos de botão desejo é uma consequência não intencionalVocê pode usar o javascript para bloquear o envio do formulário até o momento apropriado. Um exemplo muito grosseiro:
Pressionar enter ainda acionará o formulário a ser enviado, mas o javascript impedirá que ele realmente seja enviado até que você realmente pressione o botão.
fonte
Exemplo Dom
javascript
se você não usar preventDefault (), outros botões serão acionados.
fonte
Eu faria o seguinte: No manipulador do evento onclick do botão (não enviar), verifique o código-chave do objeto de evento. Se for "enter" eu retornaria false.
fonte
Minha situação possui dois
Submit
botões no elemento do formulário:Update
eDelete
. ODelete
botão exclui uma imagem e oUpdate
atualiza o banco de dados com os campos de texto no formulário.Como o
Delete
botão foi o primeiro no formulário, foi o botão padrão naEnter
tecla. Não é o que eu queria. O usuário esperaria poder baterEnter
após alterar alguns campos de texto.Encontrei minha resposta para definir o botão padrão aqui :
Sem usar nenhum script, defini o formulário ao qual cada botão pertence ao uso do
<button> form="bla"
atributo Defino oDelete
botão para um formulário que não existe e defino oUpdate
botão que eu queria acionar naEnter
chave para o formulário em que o usuário estaria ao inserir texto.Esta é a única coisa que funcionou para mim até agora.
fonte
Você pode fazer algo assim.
vincule seu evento a uma função comum e chame o evento com pressionamento de tecla ou clique no botão.
por exemplo.
fonte
Adicionei um botão do tipo "enviar" como primeiro elemento do formulário e o tornei invisível (
width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;
). Funciona como uma atualização do site, ou seja, não faço nada quando o botão é pressionado, exceto que o site é carregado novamente. Para mim funciona bem ...fonte