javascript - 如何在提交时处理 q-input/preventDefault 中的 "enter"？

Question

我有一个文本输入框，类似于:

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

当用户按下回车键时，我想将其视为提交，即处理输入而不是在文本中添加额外的换行符。

这有点像 JQuery 时代的 preventDefault。我确实找到了这个: https://quasar-framework.org/components/other-utils.html 但似乎更一般的 DOM 事件

我也试过只修改字符串(str.replace the newline)但即使是那个 hack 也有一个丑陋的延迟。

Answer 1

你需要使用vue event modifier “.prevent”在你的事件中。它还需要是一个@keydown 事件，因为在“textarea”类型的输入中使用@keydown 事件调用“添加换行符”事件。

解决方案是:

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

编辑:

“提交”是您必须定义的方法。这是我在 codepen 中制作的示例:

Codepen example

如果你想在按下 enter 键时提交表单，你可以使用 javascript。

this.$refs[refKeyYouGaveToYourForm].submit()