Mirror input values to other elements in real-time
Learn how to capture input events and update the DOM as users type. Perfect for
live previews, character counters, and interactive forms!
on inputvaluemypossessive
Demo 1: Basic Text Mirroring
Your name will appear here...
Demo 2: Large Display
HEADLINE GOES HERE
Demo 3: Code Preview
< CODE >
Demo 4: Character Counter
Your bio will appear here...
Characters: 0
The Code
Basic Input Mirroring:
<input _="on input put my value into #mirror" />
<div id="mirror"></div>
Character Counter:
<textarea _="on input
put my value into #mirror
then put my value's length into #count">
</textarea>
<div id="mirror"></div>
<span id="count"></span>
How it works:
on input - Fires every time the input value changes (as user types)
my value - Gets the current value of the input element
into #mirror - Updates the target element with the new value
my value's length - Accesses the length property of the value string
Key Concepts:
Real-time Updates:on input triggers on every keystroke
on input - Fires on every change (recommended for mirroring)
on change - Fires only when input loses focus
on keyup - Fires on every key release
on keydown - Fires on every key press
Common Use Cases:
Live Previews: Show formatted output as user types
Character Counters: Display remaining characters in forms
Search Filters: Filter lists as user types
Form Validation: Real-time validation feedback
Synchronized Inputs: Keep multiple inputs in sync
Advanced Patterns:
<!-- Uppercase transformation -->
<input _="on input put my value.toUpperCase() into #output" />
<!-- Word count -->
<textarea _="on input
put my value.split(' ').length into #word-count">
</textarea>
<!-- Conditional display -->
<input _="on input
if my value's length > 5
put 'Long enough!' into #status
else
put 'Too short' into #status
end" />
Try it yourself:
Add text transformation (uppercase, lowercase, trim)