Force letters to uppercase with x-mask

[akaspick]

I'd like to use x-mask for Canadian postal codes which have the format A9A 9A9 (alternating letter and digit). If a lowercase letter is entered, I'd like it to be forced to uppercase.

ie. typing a would automatically convert to A.

Exposing some sort of hook into the x-mask processing may solve this. Just an idea.

[ekwoka]

This seems like a decent thing to do. Adding a .uppercase and .lowercase modifiers seems like a decent solution.

Though this can be handled in your CSS as well, if it's less important to force the actual data value to uppercase.

[akaspick]

Dealing with this in CSS on the client side is actually a decent idea.

[jeffchown]

Came across this discussion when wanting the same result as @akaspick in a Livewire + Alpine app.

Doesn't using CSS only affect display? The actual data is still lowercase when saved to the database.

For anyone who may be interested, I used Caleb's Alpine.directive code for x-mask as a starting point and threw this x-uppercase directive together quickly:

Alpine.directive(
    "uppercase",
    (el, { value, expression }, { effect, evaluateLater, cleanup }) => {
        let templateFn = () => expression;
        let lastInputValue = "";

        queueMicrotask(() => {
            processInputValue(el, false);

            // Override x-model's initial value...
            if (el._x_model) el._x_model.set(el.value);
        });

        const controller = new AbortController();

        cleanup(() => {
            controller.abort();
        });

        el.addEventListener("input", () => processInputValue(el), {
            signal: controller.signal,
            // Setting this as a capture phase listener to ensure it runs
            // before wire:model or x-model added as a latent binding...
            capture: true,
        });

        // Don't "restoreCursorPosition" on "blur", because Safari
        // will re-focus the input and cause a focus trap.
        el.addEventListener("blur", () => processInputValue(el, false), {
            signal: controller.signal,
        });

        function processInputValue(el, shouldRestoreCursor = true) {
            let input = el.value;

            let template = templateFn(input);

            // If they hit backspace, don't process input.
            if (lastInputValue.length - el.value.length === 1) {
                return (lastInputValue = el.value);
            }

            let setInput = () => {
                lastInputValue = el.value = el.value.toUpperCase();
            };

            if (shouldRestoreCursor) {
                // When an input element's value is set, it moves the cursor to the end
                // therefore we need to track, estimate, and restore the cursor after
                // a change was made.
                let cursorPosition = el.selectionStart;
                el.setSelectionRange(cursorPosition, cursorPosition);
            }

            setInput();
        }
    }
).before("model");

I haven't tested it thoroughly, but it seems to be working so far.

[akaspick]

Data should be normalized on the server anyway, so the CSS solution in this case was acceptable.

[jeffchown]

👍 Always a best practice of course (normalization).

I found the exercise of creating a related Alpine directive instructive so thought I'd take a shot :)