Input Helper Test Mode

Unified testing environment for library versions.

Library Version:

v1.4.0 Latest v1.3.0 Legacy

Download v1.4.0 Download v1.3.0

Decimal Numbers NEW

Numeric input that allows a single decimal point.

Price / Weight

Percent (Max 5 chars)

<input type="text" data-decimal="2">
<input type="text" data-decimal="2" data-max="5">

Credit Card NEW

Auto-formats 16-digit card numbers (XXXX-XXXX-XXXX-XXXX).

Card Number

<input type="text" data-cc>

Time Format NEW

Simple time formatting (HH:MM).

Meeting Time

<input type="text" data-time>

Slug Generator NEW

Converts text to URL-friendly slug (lowercase, dashes).

Post Title -> Slug

<input type="text" data-slug>

Text Casing NEW

Auto-formatting for Title Case, UPPERCASE, and lowercase.

Title Case

UPPERCASE

lowercase

data-title, data-upper, data-lower

Letters Only NEW

Restrict input into English letters only (No numbers, No spaces, No symbols).

Username / Code

<input type="text" data-alpha>

Class Format NEW

Formatting for Class/Year (e.g. 1/2).

Class/Room

<input type="text" data-class>

---

Text Only (Mixed) SHARED

Allows English (a-z) and Thai (ก-๙) characters and spaces.

Full Name

<input type="text" data-text>

Max Length SHARED

Limits the number of characters allowed.

Zip Code (Max 5)

Short Code (Max 2)

<input type="text" data-max="5">
<input type="text" data-max="2">

Numbers Only SHARED

Restricts input to numeric characters only.

Try it out

PIN Code (Digits + Max 4)

<input type="text" data-number>
<input type="text" data-number data-max="4">

Phone Number SHARED

Auto-formats to standard mobile number pattern (XXX-XXX-XXXX).

Mobile Number

<input type="text" data-phone>

Thai National ID SHARED

Formats input as a standard 13-digit Thai ID card number.

National ID

<input type="text" data-thaiid>

Money Format SHARED

Automatically adds comma separators for thousands.

Amount (THB)

<input type="text" data-money>

Password Strength (Visual) SHARED

Changes border color based on length (Red < 8, Green>= 8).

Password

// Requires manual binding
el.addEventListener('input', () => passStrength(el));