Alpine x-mask Plugin Demo

alpine-x-mask-plugin-demo.markdown

Alpine x-mask Plugin Demo

A Pen by James on CodePen.

License.

index.html

<div class="container p-3">
  <h1 class="font-medium leading-tight text-5xl mt-0 mb-2 font-bold">
    x-mask
  </h1>
  <h2 class="font-medium leading-tight text-3xl mt-4 mb-2 font-bold">
    Static Masks
  </h2>
  <div class="flex justify-start" x-data>
    <div class="mb-3 w-96">
      <label for="exampleText0" class="form-label inline-block mb-2 text-gray-700">Date Input</label>
      <input x-mask="99/99/9999" placeholder="MM/DD/YYYY" type="text" class="
        form-control
        block
        w-full
        px-3
        py-1.5
        text-base
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
      " />
    </div>
  </div>
  <div class="flex justify-start" x-data>
    <div class="mb-3 w-96">
      <label for="exampleText0" class="form-label inline-block mb-2 text-gray-700">Expiration</label>
      <input x-mask="99/99" placeholder="MM/YY" type="text" class="
        form-control
        block
        w-full
        px-3
        py-1.5
        text-base
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
      " />
    </div>
  </div>
  <div class="flex justify-start" x-data>
    <div class="mb-3 w-96">
      <label for="exampleText0" class="form-label inline-block mb-2 text-gray-700">Phone Input</label>
      <input x-mask="(999) 999-9999" placeholder="(999) 999-9999" type="text" class="
        form-control
        block
        w-full
        px-3
        py-1.5
        text-base
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
      " />
    </div>
  </div>
  <h2 class="font-medium leading-tight text-3xl mt-4 mb-2 font-bold">
    Dynamic Masks
  </h2>
  <div class="flex justify-start" x-data>
    <div class="mb-3 w-96">
      <label for="exampleText0" class="form-label inline-block mb-2 text-gray-700">Payment Amount</label>
      <input x-mask:dynamic="$money($input)" type="text" placeholder="0.00" class="
        form-control
        block
        w-full
        px-3
        py-1.5
        text-base
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
      " />
    </div>
  </div>
  <div class="flex justify-start" x-data>
    <div class="mb-3 w-96">
      <label for="exampleText0" class="form-label inline-block mb-2 text-gray-700">Confirmation Code</label>
      <input x-mask:dynamic="$input.startsWith('344') ? '999 999999 999' : '999 999'" placeholder="344 XXXXXX XXX or XXX XXX" type="text" class="
        form-control
        block
        w-full
        px-3
        py-1.5
        text-base
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
      " />
    </div>
  </div>
      <label for="exampleText0" class="form-label inline-block mb-2 text-gray-700">International Number Switcher</label>
  <script>
    function intCodesComponent() {
      return {
        intCodes: [
            {
              name: "Korea, Republic of South Korea",
              dial_code: "+82",
              code: "KR",
              format: '99 9999 9999'
            },
            {
              name: "United States",
              dial_code: "+1",
              code: "US",
              format: '(999) 999-9999'
            }
        ],
        selectedDialCode: '+1',
        selectedFormat: '(999) 999-9999',
        onSelectChangeHandler(e) {
          const country = intCodes.find((element) => {
            return element.dial_code == this.selectedDialCode
          })
          
          this.selectedFormat = country.format
        },
      }
    }
  </script>
  <div x-data="intCodesComponent" x-init="intCodes = window.intCodes" class="flex form-control w-96
        block
        h-10
        text-base
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
    <select id="countries" class="pl-3 outline-none" x-model="selectedDialCode" @change="onSelectChangeHandler">
      <template x-for="{dial_code} in intCodes">
        <option :value="dial_code" x-text="dial_code" :selected="dial_code == '+1'"></option>
      </template>
    </select>
    <input x-mask:dynamic="selectedFormat" type="text" class="w-full ml-3 border-l-2 p-3 outline-none" :placeholder="selectedFormat">
  </div>
  <span class="mt-2 w-96 block">When country code changes, x-mask dynamically changes as well as the placeholder. I did not account for every country. Try changing from +1 to +82 and back.</span>
</div>

script.js

window.intCodes = [
  {
    name: "Korea, Republic of South Korea",
    dial_code: "+82",
    code: "KR",
    format: '99 9999 9999'
  },
  {
    name: "United States",
    dial_code: "+1",
    code: "US",
    format: '(999) 999-9999'
  }
];