What causes "The input element type does not support selection" in nosir/cleave.js?

Change the input to type="text" (use inputmode="numeric" to keep the numeric mobile keyboard).

The input element type does not support selection

Error message

The input element type does not support selection

What it means

Util.js wraps setSelectionRange in try/catch because some input types (email, number, and non-input elements) do not support programmatic caret positioning. When the browser rejects the call, Cleave warns instead of crashing at src/utils/Util.js:238; cursor restore is silently skipped.

Source

Thrown at src/utils/Util.js:238

            return;
        }

        // cursor is already in the end
        if (element && element.value.length <= position) {
          return;
        }

        if (element.createTextRange) {
            var range = element.createTextRange();

            range.move('character', position);
            range.select();
        } else {
            try {
                element.setSelectionRange(position, position);
            } catch (e) {
                // eslint-disable-next-line
                console.warn('The input element type does not support selection');
            }
        }
    },

    getActiveElement: function(parent) {
        var activeElement = parent.activeElement;
        if (activeElement && activeElement.shadowRoot) {
            return this.getActiveElement(activeElement.shadowRoot);
        }
        return activeElement;
    },

    isAndroid: function () {
        return navigator && /android/i.test(navigator.userAgent);
    },

    // On Android chrome, the keyup and keydown events
    // always return key code 229 as a composition that

View on GitHub (pinned to a966c95cf5)

Solutions

Change the input to type="text" (use inputmode="numeric" to keep the numeric mobile keyboard).
Remove the Cleave formatter from unsupported input types.
Ignore the warning if degraded caret behavior is acceptable.

Example fix

// before
<input type="number" class="card-input" />
// after
<input type="text" inputmode="numeric" class="card-input" />

Defensive patterns

Strategy: fallback

Validate before calling

function supportsSelection(el) {
  return el && typeof el.setSelectionRange === 'function' &&
    !/^(number|email|date)$/.test(el.getAttribute('type') || '');
}

Type guard

function isSelectableInput(el) {
  return el instanceof HTMLInputElement &&
    el.type === 'text';
}

Try / catch

try {
  el.setSelectionRange(pos, pos);
} catch (e) {
  console.warn('Element type ' + el.type + ' does not support selection; caret restore skipped');
}

Prevention

Use type="text" with inputmode="numeric" for formatted numeric fields.
Never apply Cleave to type="number", "email", or "date" inputs.
Expect degraded caret behavior on unsupported types — format on blur instead if needed.
Test on Firefox as well as Chromium, since selection support differs.

When it happens

Trigger: Applying a Cleave formatting option to <input type="number">, type="email", type="date", or a non-input element; any keystroke path that tries to restore the caret position on such an element.

Common situations: Using type="number" for credit cards or phone numbers (a common pattern that also breaks formatting); attaching Cleave to a contenteditable or div by mistake; browser differences (Firefox historically threw more eagerly than Chrome).

Related errors

AI-assisted analysis of nosir/cleave.js@a966c95cf5 (2026-09-02). Data as JSON: /api/errors/d2060d697c7bf260. Report an issue: GitHub.