Question 160259 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can Jquery be used to mask input fields?

Let’s suppose I have the following constants declared:

const begin = '1234';
const end = '789';

and I have one html input with preset value=’1234-56??-????-0987′

How can I setup a mask (using jQuery-Mask plugin, or not) to:

  • When the user inserts any number (for example 7) on the input, the value becomes: 1234-567?-????-0987
  • If, after this user inserts ‘8’, it becomes: 1234-5678-????-0987
  • When the user replaces all ‘?’, then stop accepting inputs.
  • If the user backspaces/erases any digit, the corresponding ? appears again.

Currently I have this code:

const start = '123456';
const end = '0987';
const input = document.getElementById('entry-number');
input.addEventListener('input', () => 
{
    const mask = "******";
    const userInput = input.value.replace(/D/g, "").replace(start, "").replace(end, "");
    const newNumber = start + userInput + mask.slice(userInput.length) + end;
    input.value = newNumber;
});

But

  1. It doesn’t respect the mask with hyphens.
  2. If I hit backspace, it completely bugs the input value.
Tags:

2

Answers


  1. 0

    A mask is a pattern that can be used to guide the user’s input by specifying the expected format. It can be used to restrict input to a certain format, such as phone numbers, credit card numbers, or dates. Masks are often used in forms to ensure that the user enters the correct information in the correct format. Here’s an example of how to use a mask in HTML to create a date input field:

    <input type="text" id="date" name="date" placeholder="dd/mm/yyyy" pattern="d{2}/d{2}/d{4}" required>

    In this example, the pattern attribute specifies the mask for the input field. The mask d{2}/d{2}/d{4} requires the user to enter two digits for the day, two digits for the month, and four digits for the year separated by slashes. The required attribute specifies that the field is mandatory.

    When the user types in the input field, the mask will automatically format the input to match the specified pattern. If the user enters an incorrect value, such as an invalid date format, the form will not submit and an error message will be displayed.

    There are also many third-party libraries available for creating input masks in various formats, such as jQuery Mask Plugin or Inputmask. These libraries often provide more advanced features, such as dynamic masks that change based on user input or the ability to specify optional parts in the mask.

    Login or Signup to reply.
  2. 0

    The jQuery inputmask plugin could be used to achieve this.

    We would use the mask 1234-5699-9999-0\987. The 99-9999 pattern in (approximately) the middle indicates where arbitrary digits may be entered. The \9 indicates that this position will have a literal "9" and not an arbitrary digit. We can specify ? as the placeholder value which will be used in the absence of any of the arbitrary digits that can be entered.

    $('#entry-number').inputmask({
  mask: '1234-5699-9999-0\987',
  placeholder: '?'
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.inputmask.min.js"></script>
<input id="entry-number">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search