how to handle an "enter" in a q-input / preventDefault on submit?

Question

I have a text input field, something like:

        <q-input
          @blur="checkTextAnswer"
          @keyup.enter="submit"
          @keydown="checkEnterKey"
          v-model.trim="textInput"

When the user hits enter I want to treat it like a submit, ie to handle the input and not add an extra newline in the text.

It's a bit like preventDefault from JQuery days. I did find this: https://quasar-framework.org/components/other-utils.html but seems for more general DOM events

I also tried just modifying the string (str.replace the newline) but even that hack has an ugly delay.

Answer 1

You need to use the vue event modifier ".prevent" in your event. It also needs to be a @keydown event since the "add newline" event is called with @keydown events in inputs of type "textarea".

The solution would be:

     <q-input
      type="textarea"
      @keydown.enter.prevent="submit"
      v-model.trim="textInput"

EDIT:

The 'submit' is a method that you have to define. Here's an example I made in codepen:

Codepen example

If you instead want to submit a form when pressing enter you can just use javascript for this.

this.$refs[refKeyYouGaveToYourForm].submit()