如何设置q-input输入框按下回车键时提交q-form表单

你给q-input配置了autogrow属性后，Quasar 会自动把这个输入框渲染为多行文本域（textarea），多行文本域默认回车键的行为是插入换行符，不会触发外层q-form的提交。

给q-input绑定回车键监听事件，拦截默认的换行行为，手动触发表单提交即可，修改后的完整代码如下：

<q-form ref="urlForm" greedy @submit="saveUrl">
  <q-card-section>
    <!-- url -->
    <q-input
      v-model="url"
      :label="t('url')"
      :rules="[urlValidator]"
      outlined dense autogrow autofocus
      @keyup.enter="(e) => {
        // 阻止默认换行
        e.preventDefault()
        // 调用表单实例的submit方法，会自动执行所有校验规则，校验通过后才触发saveUrl提交逻辑，和点提交按钮行为完全一致
        $refs.urlForm.submit()
      }"
    ></q-input>
  </q-card-section>
  <q-card-section class="text-center q-ma-none q-py-md">
    <q-btn class="q-ma-xs" type="submit" color="positive" :loading="saving" :disable="saving">{{ t('SaveChanges') }}</q-btn>
  </q-card-section>
</q-form>

可选交互优化 #

如果你需要保留多行输入能力，可以调整事件逻辑，实现单独按回车提交、按Shift+Enter插入换行的常用交互，只需要替换事件绑定的逻辑即可：

@keyup.enter="(e) => {
  // 按下Shift+Enter时不拦截，保留默认换行行为
  if (e.shiftKey) return
  e.preventDefault()
  $refs.urlForm.submit()
}"

额外提示 #

如果你本身不需要多行输入功能，直接删掉q-input上的autogrow属性，输入框会变为单行输入模式，默认按回车就会自动触发表单提交，不需要额外绑定事件。

内容的提问来源于stack exchange，提问作者AoooR