渐进式编程课
Vue 目录
第 18 课2026.09.23

时长超出范围且用户点击提交时，把焦点移回出错字段。

第 18 课：无效提交时聚焦时长输入

  • 日期：2026-09-23
  • 课程序号：第 18 课
  • 知识点：模板引用与输入焦点

用途或适用场景

时长超出范围且用户点击提交时，把焦点移回出错字段。

核心概念

Vue 3.5+ 的 useTemplateRef 读取模板中已有输入元素；只有无效提交时才调用该元素的 focus()。

最小代码或操作示例

vue
<script setup>
import { ref, computed, useTemplateRef } from 'vue'
const minutes = ref(0)
const touched = ref(false)
const lessons = ref([])
const valid = computed(() => typeof minutes.value === 'number' && minutes.value >= 1 && minutes.value <= 60)
const minutesInput = useTemplateRef('minutes-input')
function submit() {
  if (!valid.value) {
    touched.value = true
    minutesInput.value?.focus()
    return
  }
  lessons.value.push({ minutes: minutes.value })
}
</script>
<template>
  <form novalidate @submit.prevent="submit">
    <input ref="minutes-input" v-model.number="minutes" type="number"
      min="1" max="60" @blur="touched = true" :aria-invalid="touched && !valid"
      :aria-describedby="touched && !valid ? 'minutes-error' : undefined">
    <p v-if="touched && !valid" id="minutes-error">请输入 1 到 60 分钟</p>
    <button>提交</button>
  </form>
</template>

3～5 分钟练习

输入 0 后提交，观察浏览器焦点位置。

参考答案

valid 为假，函数不会向 lessons 添加数据，焦点回到时长输入框。

与上一课的联系

沿用第 17 课的 minutes、valid、touched、错误提示和 ARIA 关联；本课只增加模板引用及无效提交时的聚焦；完成后下一课可处理提交成功后的输入清空。

时效校验

时效校验：2026-09-24（Vue 3 当前模板引用指南；useTemplateRef 从 Vue 3.5 起提供，未见废弃标记）。

官方参考