Lineone - From Input Mask

Input Mask

Code

An input mask is a string of characters that indicates the format of valid input values. The Cleave.js library is used for this purpose. See more on Github and to the code example below.

With Prefix:

                
  <div>
    <span>With Prefix:</span>
    <label>
      <input
        id="inputmask1"
        class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder="Username"
        type="text"
      />
    </label>
  </div>

  <!-- Javascript -->

  <script>
    const config1 = {
      prefix: "Prefix",
      delimiter: "-",
      blocks: [6, 4, 4, 7],
    };

    const inputmask1 = document.querySelector("#inputmask1");
    inputmask1._mask = new Cleave(inputmask1, config1);
  </script>

Delimiters Formatting

Code

An input mask is a string of characters that indicates the format of valid input values. The Cleave.js library is used for this purpose. See more on Github and to the code example below.

With Delimiters Formatting:

                
  <div>
    <span>With Delimiters Formatting:</span>
    <label>
      <input
        id="inputmask2"
        class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder="xxx.xx_xxx-xxx"
        type="text"
      />
    </label>
  </div>

  <!-- Javascript -->

  <script>
    const config2 = {
      delimiters: [".", "_", "-"],
      blocks: [3, 2, 3, 3],
      uppercase: true,
    };

    const inputmask2 = document.querySelector("#inputmask2");
    inputmask2._mask = new Cleave(inputmask2, config2);
  </script>

Credit Card

Code

An input mask is a string of characters that indicates the format of valid input values. The Cleave.js library is used for this purpose. See more on Github and to the code example below.

Enter Credit Card:

                
  <div>
    <span>Enter Credit Card:</span>
    <label>
      <input
        id="inputmask3"
        class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder="xxxx xxxx xxxx xxxx"
        type="text"
      />
    </label>
  </div>

  <!-- Javascript -->

  <script>
    const config3 = {
      creditCard: true,
    };

    const inputmask3 = document.querySelector("#inputmask3");
    inputmask3._mask = new Cleave(inputmask3, config3);
  </script>

DateTime Formatting

Code

An input mask is a string of characters that indicates the format of valid input values. The Cleave.js library is used for this purpose. See more on Github and to the code example below.

Date:

Time:

                
  <div class="space-y-4">
    <div>
      <span>Date:</span>
      <label>
        <input
          id="inputmask4"
          class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
          placeholder="Enter Date"
          type="text"
        />
      </label>
    </div>
    <div>
      <span>Time:</span>
      <label>
        <input
          id="inputmask5"
          class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
          placeholder="Enter Time"
          type="text"
        />
      </label>
    </div>
  </div>

  <!-- Javascript -->

  <script>
    const config4 = {
      date: true,
      delimiter: "-",
      datePattern: ["m", "d", "Y"],
    };

    const inputmask4 = document.querySelector("#inputmask4");
    inputmask4._mask = new Cleave(inputmask4, config4);

    const config5 = {
      time: true,
      timePattern: ["h", "m", "s"],
    };

    const inputmask5 = document.querySelector("#inputmask5");
    inputmask5._mask = new Cleave(inputmask5, config5);
  </script>

Phone Formatting

Code

An input mask is a string of characters that indicates the format of valid input values. The Cleave.js library is used for this purpose. See more on Github and to the code example below.

Phone Number: US (+1)

                
  <div>
    <span>Phone Number:</span>
    <label class="mt-1.5 flex -space-x-px">
      <span
        class="flex shrink-0 items-center justify-center rounded-l-lg border border-slate-300 px-3.5 font-inter dark:border-navy-450"
      >
        <span>US (+1)</span>
      </span>
      <input
        id="inputmask6"
        class="form-input w-full rounded-r-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder="Enter Phone"
        type="text"
      />
    </label>
  </div>

  <!-- Javascript -->

  <script>
    const config6 = {
      phone: true,
      phoneRegionCode: "US",
    };

    const inputmask6 = document.querySelector("#inputmask6");
    inputmask6._mask = new Cleave(inputmask6, config6);
  </script>

Numeral Formatting

Code

An input mask is a string of characters that indicates the format of valid input values. The Cleave.js library is used for this purpose. See more on Github and to the code example below.

                
  <div class="flex -space-x-px">
    <select
      class="form-select rounded-l-full border border-slate-300 bg-white px-3 py-2 pr-9 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
      id="maskUpdate"
    >
      <option value="thousand">Thousands</option>
      <option value="lakh">Indian lakh</option>
      <option value="wan">Chinese wan</option>
    </select>

    <input
      id="inputmask7"
      class="form-input w-full rounded-r-full border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Enter Phone"
      type="text"
    />
  </div>

  <!-- Javascript -->

  <script>
    const config7 = {
      numeral: true,
      numeralThousandsGroupStyle: "thousand",
    };

    const inputmask7 = document.querySelector("#inputmask7");
    const maskUpdate = document.querySelector("#maskUpdate");

    maskUpdate.addEventListener("change", (evt) => {
      config7.numeralThousandsGroupStyle = evt.target.value;
      inputmask7._mask.destroy();
      inputmask7._mask = new Cleave(inputmask7, config7);
    });

    inputmask7._mask = new Cleave(inputmask7, config7);
  </script>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Input Mask

Input Mask

Delimiters Formatting

Credit Card

DateTime Formatting

Phone Formatting

Numeral Formatting