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事件

我还尝试过仅修改字符串（替换换行符），但是即使是这种hack也有一个难看的延迟。

Answer 1

您需要在事件中使用vue event modifier“ .prevent”。它也必须是@keydown事件，因为在类型为“ textarea”的输入中，“ add newline”事件是与@keydown事件一起调用的。

解决方案是：

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

编辑：

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

Codepen example

如果您想在按Enter键时提交表单，则可以使用javascript。

this.$refs[refKeyYouGaveToYourForm].submit()

如何在提交时在q-input / preventDefault中处理“输入”？

1 个答案: