x-mask regexp

[baravak]

custom regexp in x-mask

<input x-mask="1?99">

[jonny-wg2]

Plus 2. This would be super useful

[dan-caldwell]

Bump, I really need a way to allow only letters, numbers, and periods of an unknown length. My use case is for searching by domain name.

[dan-caldwell]

Quick example I made by modifying the mask plugin to support this. I only spent a few minutes on this so any improvements would be appreciated.

Usage

<input x-inputmask:dynamic="myAwesomeMask" x-model="myValue" />

...
myAwesomeMask() {
   return '[^a-z0-9\.\-]';
},
...

export default function (Alpine) {

  Alpine.directive('inputmask', (el, { value, expression }, { effect, evaluateLater, cleanup }) => {
    let templateFn = () => expression
    let lastInputValue = ''

    queueMicrotask(() => {
      if (['function', 'dynamic'].includes(value)) {
        // This is an x-mask:function directive.

        let evaluator = evaluateLater(expression)

        effect(() => {
          templateFn = input => {
            let result

            // We need to prevent "auto-evaluation" of functions like
            // x-on expressions do so that we can use them as mask functions.
            Alpine.dontAutoEvaluateFunctions(() => {
              evaluator(value => {
                result = typeof value === 'function' ? value(input) : value
              })
            })

            return result
          }

          // Run on initialize which serves a dual purpose:
          // - Initializing the mask on the input if it has an initial value.
          // - Running the template function to set up reactivity, so that
          //   when a dependency inside it changes, the input re-masks.
          processInputValue(el, false)
        })
      } else {
        processInputValue(el, false)
      }

      // Override x-model's initial value...
      if (el._x_model) {
        // If the x-model value is the same, don't override it as that will trigger updates...
        if (el._x_model.get() === el.value) return

        // If the x-model value is `null` and the input value is an empty 
        // string, don't override it as that will trigger updates...
        if (el._x_model.get() === null && el.value === '') return

        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 a template value is `falsy`, then don't process the input value
      if (!template || template === 'false') return false

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

      let setInput = () => {
        lastInputValue = el.value = formatInput(input, template)
      }

      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.
        restoreCursorPosition(el, template, () => {
          setInput()
        })
      } else {
        setInput()
      }
    }

    function formatInput(input, template) {
      // Let empty inputs be empty inputs.
      if (input === '') return ''
      let rebuiltInput = buildUp(template, input)

      return rebuiltInput
    }
  }).before('model')
}

export function restoreCursorPosition(el, template, callback) {
  let cursorPosition = el.selectionStart
  let unformattedValue = el.value

  callback()

  let beforeLeftOfCursorBeforeFormatting = unformattedValue.slice(0, cursorPosition)

  let newPosition = buildUp(template, beforeLeftOfCursorBeforeFormatting).length

  el.setSelectionRange(newPosition, newPosition)
}

export function buildUp(template, input) {
  const regex = new RegExp(template);
  return input.replace(regex, '');
}

[elisa-a-v]

I think this achieves the behavior you need:

<html>
  <head>
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
 
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
  </head>

  <body>

    <div x-data>
      <input x-mask:dynamic="$input.replace(/[^A-Za-z0-9.]/g, '')">
    </div>
  </body>
</html>

here's a codepen

[dan-caldwell]

@elisa-a-v Works great, thank you!