Forum > TIWEdit format mask

02-26-2024, 04:51 AM:

Hi,

I need a control that the user can enter 20 digits into in 4 blocks of 5 separated by hyphens (ie 00000-00000-00000-00000)

Is it possible to use the DataTypeOptions.Pattern property to achieve this? If not are there any other suggestions?

Thanks,

Tim

02-27-2024, 06:13 PM:

Hum... possibly it won't do what you expect.

If you use a pattern like this:

\d{5}-\d{5}-\d{5}-\d{5}

It will validate the entry exactly the way you want before submitting it to the server, and it will show a message to the user if the data doesn't comply.

However, it won't apply a mask to the input. The user is basically free to enter anything they want.

If you want to limit the input using a mask, you likely need to use something else.

Let me see if I can get a simple demo on how to do it.

02-28-2024, 09:03 PM:

(02-27-2024, 06:13 PM)Alexandre Machado Wrote: [ -> ]Hum... possibly it won't do what you expect.

If you use a pattern like this:

\d{5}-\d{5}-\d{5}-\d{5}

It will validate the entry exactly the way you want before submitting it to the server, and it will show a message to the user if the data doesn't comply.

However, it won't apply a mask to the input. The user is basically free to enter anything they want.

If you want to limit the input using a mask, you likely need to use something else.

Let me see if I can get a simple demo on how to do it.

Thanks for your response Alexandre. Look forward to hearing more if you have time.

03-01-2024, 07:09 AM:

Hi again!

Took a little longer than I anticipated, but here is the demo.

Please check the JavaScript property of the form (Where there is a JS function that applies the mask that you want), and also the code in the main form which is also simple.

The text will be limited to digits [0-9], max 23 chars (including 3 hyfens) , as in xxxxx-xxxxx-xxxxx-xxxxx

Please let me know how it goes

[attachment=717]

Cheers

03-10-2024, 11:59 PM:

(03-01-2024, 07:09 AM)Alexandre Machado Wrote: [ -> ]Hi again!

Took a little longer than I anticipated, but here is the demo.

Please check the JavaScript property of the form (Where there is a JS function that applies the mask that you want), and also the code in the main form which is also simple.

The text will be limited to digits [0-9], max 23 chars (including 3 hyfens) , as in xxxxx-xxxxx-xxxxx-xxxxx

Please let me know how it goes

Cheers

That's fantastic thanks Alexandre. After you showed me how to get started I added some more code to handle characters being inserted in the middle existing text as well as appended to it. Here's the end result:

Code:

function applyMask(event) {

    const inputField = event.target;

    let value1 = '';

    let value2 = '';

    let maskedValue = '';

    let startPos = inputField.selectionStart;

    let dashCount = 0;

    value1 = inputField.value.substring(0, inputField.selectionStart);

    value2 = inputField.value.substring(inputField.selectionStart, inputField.value.length);

    value1 = value1.replace(/\D/g, '');

    value2 = value2.replace(/\D/g, '');

    for (let i = 0; i < value1.length; i++) {

        if (i > 0 && i % 5 === 0) {

            maskedValue += '-';

            dashCount++;

        }

        maskedValue += value1[i];

    }

    startPos = value1.length + 1 + dashCount;

    if (value2 != '') {

        startPos--;

    }

    for (let i = value1.length; i < value1.length + value2.length; i++) {

        if (i > 0 && i % 5 === 0) {

            maskedValue += '-';

        }

        maskedValue += value2[i - value1.length];

    }

    inputField.value = maskedValue.substring(0, 23);

    inputField.selectionStart = startPos;

    inputField.selectionEnd = startPos;

}