⬅️ Back to Table of Contents

📄 onStartTyping

📊 Analysis Summary

Metric	Count
🔧 Functions	4
📦 Imports	3
📐 Interfaces	1

📚 Table of Contents

• Imports
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/onStartTyping/index.ts

📦 Imports

Name	Source
ConfigurableDocument	../_configurable
defaultDocument	../_configurable
useEventListener	../useEventListener

---

Functions

isFocusedElementEditable(): boolean

Returns: boolean

Calls:

• activeElement.hasAttribute

Internal Comments:

// If not element has focus, we assume it is not editable, too.
// Assume <input> and <textarea> elements are editable.
// Check if any other focused element id editable.

Code

export function isFocusedElementEditable(): boolean {
  const { activeElement, body } = document

  if (!activeElement)
    return false

  // If not element has focus, we assume it is not editable, too.
  if (activeElement === body)
    return false

  // Assume <input> and <textarea> elements are editable.
  switch (activeElement.tagName) {
    case 'INPUT':
    case 'TEXTAREA':
      return true
  }

  // Check if any other focused element id editable.
  return activeElement.hasAttribute('contenteditable')
}

isTypedCharValid({ keyCode, metaKey, ctrlKey, al…: KeyboardEvent): boolean

Parameters:

• { keyCode, metaKey, ctrlKey, altKey, } KeyboardEvent

Returns: boolean

Internal Comments:

// 0...9
// A...Z
// All other keys.

Code

export function isTypedCharValid({
  keyCode,
  metaKey,
  ctrlKey,
  altKey,
}: KeyboardEvent): boolean {
  if (metaKey || ctrlKey || altKey)
    return false

  // 0...9
  if ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105))
    return true

  // A...Z
  if (keyCode >= 65 && keyCode <= 90)
    return true

  // All other keys.
  return false
}

onStartTyping(callback: (event: KeyboardEvent) => void, options: OnStartTypingOptions): void

Fires when users start typing on non-editable elements.

Parameters:

• callback any: No description
• options any: No description

See: https://vueuse.org/onStartTyping

Raw JSDoc

/**
 * Fires when users start typing on non-editable elements.
 *
 * @see https://vueuse.org/onStartTyping
 * @param callback
 * @param options
 */

Calls:

• isFocusedElementEditableFn
• isTypedCharValidFn
• callback
• useEventListener (from ../useEventListener)

Code

export function onStartTyping(callback: (event: KeyboardEvent) => void, options: OnStartTypingOptions = {}) {
  const { document = defaultDocument, isTypedCharValid: isTypedCharValidFn = isTypedCharValid, isFocusedElementEditable: isFocusedElementEditableFn = isFocusedElementEditable } = options

  const keydown = (event: KeyboardEvent) => {
    if (!isFocusedElementEditableFn() && isTypedCharValidFn(event)) {
      callback(event)
    }
  }

  if (document)
    useEventListener(document, 'keydown', keydown, { passive: true })
}

Internal helpers

Declared inside another function in this file.

keydown(event: KeyboardEvent): void

Parameters:

• event KeyboardEvent

Returns: void

Calls:

• isFocusedElementEditableFn
• isTypedCharValidFn
• callback

Code

(event: KeyboardEvent) => {
    if (!isFocusedElementEditableFn() && isTypedCharValidFn(event)) {
      callback(event)
    }
  }

---

Interfaces

OnStartTypingOptions

Interface Code

export interface OnStartTypingOptions extends ConfigurableDocument {
  isTypedCharValid?: (event: KeyboardEvent) => boolean
  isFocusedElementEditable?: () => boolean
}

Properties

Name	Type	Optional	Description
isTypedCharValid	(event: KeyboardEvent) => boolean	✓	not shown
isFocusedElementEditable	() => boolean	✓	not shown

---

Generated by Syntax Scribe