c634ebe501
Cleaned up development debugging output for production deployment. Core form field navigation behavior (Enter key → next field, Ctrl+Enter in textarea → newline) verified and stable. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import { ref, onMounted } from 'vue'
|
|
|
|
export function useFormFieldNavigation() {
|
|
const inputRef = ref<HTMLElement | null>(null)
|
|
|
|
function findFormElement(): HTMLElement | null {
|
|
if (!inputRef.value) return null
|
|
|
|
// Try to find a form first
|
|
const form = inputRef.value.closest('form')
|
|
if (form) return form
|
|
|
|
// If no form, find the nearest container or use body
|
|
let container: HTMLElement | null = inputRef.value.parentElement
|
|
for (let i = 0; i < 15; i++) {
|
|
if (!container) break
|
|
if (container.tagName === 'BODY') break
|
|
container = container.parentElement
|
|
}
|
|
return container || document.body
|
|
}
|
|
|
|
function getFormInputElements(): HTMLElement[] {
|
|
const form = findFormElement()
|
|
if (!form) return []
|
|
|
|
const selector = 'input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea, select, button, [role="button"]'
|
|
|
|
return Array.from(form.querySelectorAll(selector))
|
|
.filter((el: any) => !el.disabled && !el.hidden && el.offsetParent && el.tabIndex !== -1)
|
|
}
|
|
|
|
function findNextField(): HTMLElement | null {
|
|
const elements = getFormInputElements()
|
|
if (!inputRef.value || elements.length === 0) return null
|
|
|
|
const currentIndex = elements.indexOf(inputRef.value)
|
|
if (currentIndex === -1) return null
|
|
|
|
const nextIndex = currentIndex + 1
|
|
return nextIndex < elements.length ? elements[nextIndex] : elements[0]
|
|
}
|
|
|
|
function moveToNextField(): void {
|
|
const nextField = findNextField()
|
|
if (nextField) {
|
|
nextField.focus()
|
|
if (nextField instanceof HTMLInputElement || nextField instanceof HTMLTextAreaElement) {
|
|
nextField.select?.()
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleKeyDown(event: KeyboardEvent, isTextArea: boolean = false): boolean {
|
|
if (!isTextArea) {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault()
|
|
moveToNextField()
|
|
return true
|
|
}
|
|
} else {
|
|
if (event.key === 'Enter') {
|
|
if (event.ctrlKey || event.metaKey) {
|
|
return false
|
|
} else {
|
|
event.preventDefault()
|
|
moveToNextField()
|
|
return true
|
|
}
|
|
}
|
|
}
|
|
return false
|
|
}
|
|
|
|
return {
|
|
inputRef,
|
|
handleKeyDown,
|
|
moveToNextField,
|
|
findNextField,
|
|
getFormInputElements
|
|
}
|
|
}
|