maxlength and minlength Attributes

Technical Deep Dive & Specifications

maxlength vs minlength Mechanics

                                  USER TYPES IN INPUT
                                           |
                                           v
                       Is string length >= maxlength?
                                     /   \
                               Yes  /     \  No
                                   /       \
                                  v         v
                         [ BLOCK KEYSTROKE ] [ INSERT CHARACTER ]
                                                    |
                                                    v
                                         [ USER CLICKS SUBMIT ]
                                                    |
                       +----------------------------+----------------------------+
                       |                                                         |
          Is 0 < length < minlength?                                  Is length > maxlength?
                     /   \                                                       /   \
               Yes  /     \  No                                            Yes  /     \  No
                   v       \                                                   v       \
        +-------------------+  v                                    +-------------------+  v
        | validity.tooShort |  [ VALID ]                            | validity.tooLong  |  [ VALID ]
        | Submission Blocked|                                       | Submission Blocked|
        +-------------------+                                       +-------------------+

[!NOTE] minlength does not make a field required! If an input with minlength="8" is completely empty (""), it is considered valid and can be submitted. To require entry, pair it with the required attribute.

The Unicode & UTF-16 Code Unit Trap

One of the most treacherous traps in web development stems from how the WHATWG HTML and ECMAScript specifications define string length.

Length is measured in UTF-16 Code Units (16-bit chunks), NOT human-perceived visual characters (Grapheme Clusters).

+---------------------------------------------------------------------------------------+
|                               UNICODE ENCODING COMPARISON                             |
+---------------------------------------------------------------------------------------+
| Character               | Code Points          | UTF-16 Code Units | Grapheme Count   |
+-------------------------+----------------------+-------------------+------------------+
| Latin "A"               | U+0041               | 1 code unit       | 1 character      |
| Rocket Emoji "🚀"        | U+1F680              | 2 code units      | 1 character      |
| Family Emoji "👨‍👩‍👧‍👦"       | U+1F468 U+200D ...   | 11 code units     | 1 character      |
| Flag "🇺🇸"               | U+1F1FA U+1F1F8      | 4 code units      | 1 character      |
+-------------------------+----------------------+-------------------+------------------+

// The String Length Illusion in JavaScript & HTML:
const text1 = "A";
console.log(text1.length); // 1

const text2 = "🚀"; 
console.log(text2.length); // 2 (Surrogate pair: \uD83D\uDE80)

const text3 = "👨‍👩‍👧‍👦";
console.log(text3.length); // 11 (Composed with Zero-Width Joiners!)

If an input has maxlength="10", a user attempting to type "Hello 👨‍👩‍👧‍👦" will find their input truncated or blocked because that string consumes 17 UTF-16 code units, even though to human eyes it is only 7 characters long!

Modern Solution: Intl.Segmenter

To calculate true human-perceived character counts in client-side character counters, use the modern JavaScript standard Intl.Segmenter:

function getTrueGraphemeCount(str) {
  const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
  return Array.from(segmenter.segment(str)).length;
}

console.log(getTrueGraphemeCount("👨‍👩‍👧‍👦")); // 1 (Accurate!)

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 37–43 (<input type="text" minlength="4" maxlength="15" required>): Combines minimum length, maximum length, and required constraints.
• Line 46 (aria-live="polite"): Informs screen readers of character counter updates politely without aggressively interrupting screen reader speech.
• Line 17 (input:user-invalid): Applies error styling only after the user interacts with the input and violates the 4-character minimum upon blur or submission.
• Line 60–63 (Intl.Segmenter): Compares raw string UTF-16 code units (which govern the browser's maxlength cutoff) against true visual graphemes.

Expected Browser Render Output

Character Constraint Lab

Screen Handle (Min 4, Max 15 chars)
[ quantum_🚀                                  ]
Must be 4–15 characters                    10 / 15

Raw Value: "quantum_🚀"
UTF-16 Code Units (HTML Limit): 10 / 15
True Human Graphemes (Intl):    9
validity.tooShort:             false
validity.tooLong:              false
validity.valid:                true