fs-mirrorinput

Mirrors input events between two elements

Overview

The fs-mirrorinput attribute synchronizes the value of one input field (trigger) to another input field (target) in real-time. Any changes to the trigger input are automatically reflected in the target input.

Attribute Syntax

The attribute uses the following syntax:

fs-mirrorinput-element="[element-type]"

Elements

trigger

Defines the element as the trigger - the source input whose events will be mirrored.

<input 
  type="text"
  fs-mirrorinput-element="trigger"
>

target

Defines the element as the target - the destination input that will receive the mirrored values.

<input 
  type="text"
  fs-mirrorinput-element="target"
>

Usage Examples

Basic Mirror

<div fs-mirrorinput="1">
  <!-- Source input -->
  <input 
    type="text"
    fs-mirrorinput-element="trigger"
    placeholder="Type here..."
  >
  
  <!-- Mirrored input -->
  <input 
    type="text"
    fs-mirrorinput-element="target"
    readonly
  >
</div>

How It Works

1. Listens for input events on the window object
2. Detects trigger inputs with the trigger element attribute
3. Finds matching target using the same instance identifier
4. Validates input types match between trigger and target
5. Copies the value from trigger to target in real-time
6. Updates immediately as the user types

Instance Grouping

Use instance identifiers to create multiple independent mirror pairs:

<!-- Instance 1 -->
<input fs-mirrorinput-element="trigger" fs-mirrorinput="1">
<input fs-mirrorinput-element="target" fs-mirrorinput="1">

<!-- Instance 2 -->
<input fs-mirrorinput-element="trigger" fs-mirrorinput="2">
<input fs-mirrorinput-element="target" fs-mirrorinput="2">

Supported Input Types

The mirror attribute works with:

• <input type="text">
• <input type="email">
• <input type="password">
• <input type="number">
• <input type="tel">
• <input type="url">
• <textarea>

Both the trigger and target elements must have the same input type for mirroring to work. For example, a text input trigger can only mirror to a text input target.

Common Use Cases

Email Confirmation

Mirror email input to a confirmation field for verification.

Live Preview

Show users a real-time preview of their input.

URL Slugs

Display how a title will appear in a URL.

Hidden Field Sync

Sync visible inputs to hidden form fields.

Multi-Step Forms

Carry input values across form steps.

Make target inputs readonly to prevent users from editing them directly while still allowing the mirrored value to update.

The attribute monitors all input events globally, so you only need to add the element attributes to your inputs - no initialization code required.