1

Tenho um input no VueJS que está dentro de um form e quando eu pressionar enter não quero que o form seja submetido.

Junto com o VueJS estou usando o Quasar e consegui atribuir a chamada da função somente na tecla enter:

<form @keydown.enter="evitarSubmit">

Função:

evitarSubmit () {
  console.log('Tentou evitar')
}

Estou com dificuldade para encontrar e elaborar um código que anule o efeito do enter sobre o form, mas aceito sugestões...

2
  • se você esta conseguindo entrar certinho no evitarSubmit(), é só colocar um event.preventDefault(), que ele cancela o form submit.
    – Vinicius
    Commented 18/10/2017 às 13:07
  • stackoverflow.com/questions/895171/…
    – user60252
    Commented 18/10/2017 às 13:51

2 Respostas 2

3

Tens várias maneiras. Uma delas é usar @keydown.enter.prevent na <form>. Isso previne o submit mas também previne o enter de ser usado onde foi pressionado, e talvez esse efeito seja indesejado.

Outra maneira é usar @keydown.enter.stop localmente no input em questão, ou criando uma div à volta desses inputs e colocar lá para impedir o evento de propagar até ao form.

new Vue({
  el: "#app",
  data() {
    return {
      input1: '',
      input2: '',
      textarea: ''
    }
  }
});
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
  <form action="/foo">
    <div @keydown.enter.stop>
      <input type="text" v-model="input1" />
      <input type="text" v-model="input2" />
      <textarea v-model="textarea"></textarea>
    </div>
  </form>
  <p>{{input1}}</p>
  <p>{{input2}}</p>
  <p>{{textarea}}</p>
</div>

Obs:

Há um detalhe a ter em conta. Os browsers comportam-se de maneira diferente quando só têm 1 input. Aí o método de cima não funciona e tens de usar algo assim:

new Vue({
  el: "#app",
  data() {
    return {
      input: '',
      textarea: ''
    }
  }
});
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
  <form action="/foo">
      <input type="text" v-model="input" @keydown.enter.stop.prevent/>
      <textarea v-model="textarea"></textarea>
  </form>
  <p>{{input}}</p>
  <p>{{textarea}}</p>
</div>

1

Capture o enter no seu formulário e previna com que o evento de submit dispare assim:

event.returnValue=false;
event.cancel = true;

Segue exemplo funcionando:

function EnterKeyFilter()
{  
  if (window.event.keyCode == 13)
  {   
      event.returnValue=false;
      event.cancel = true;
  }
}
<form onkeydown="EnterKeyFilter();">
  <input type="text" name="teste" placeholder="pressione enter"/>
  <button type="submit" name="btnTeste">Enviar</button>
</form>

3
  • mas até um botão submit não funcionará
    – user60252
    Commented 18/10/2017 às 13:52
  • Corrigi o código, veja agora Commented 18/10/2017 às 14:44
  • agora está correto, meu + 1 dado
    – user60252
    Commented 18/10/2017 às 17:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .