[筆記] Vue3 實作點擊聚焦 input 當失焦時觸發函式 @地瓜大的飛翔旅程

章節連結

內容

Vue3 在實作失焦時觸發某個函式時，需先有「聚焦」的行為。因此你在點擊某個按鈕後，要幫使用者自動聚焦到指定的 input 上，否則會發生預期外的行為。

內容

const value = ref('')
const nameDom = ref<HTMLInputElement | null>
const handleTriggerEdit = async ({ targetKey }: { targetKey: 'name' }) => {
  // 使用 nextTick 確保 DOM 已更新後再執行 focus
  await nextTick()

  // 自動設定焦點到對應的輸入框
  const inputMap: Record<'name', Ref<HTMLInputElement | null>> = {
    name: nameDom,
  }

  const inputElement = inputMap[targetKey]?.value
  if (inputElement) {
    inputElement.focus()
  }
}

<input
  v-model="value"
  ref=nameDom
  type="text"
  min="1"
  class="mx-2 w-10 p-1 text-center focus:ring-0"
  @blur="handleInputBlur({ targetKey: 'name' })"
/>