Atozed Forums
TIWEdit format mask - Printable Version

+- Atozed Forums (https://www.atozed.com/forums)
+-- Forum: Atozed Software Products (https://www.atozed.com/forums/forum-1.html)
+--- Forum: IntraWeb (https://www.atozed.com/forums/forum-3.html)
+---- Forum: English (https://www.atozed.com/forums/forum-16.html)
+----- Forum: IntraWeb General Discussion (https://www.atozed.com/forums/forum-4.html)
+----- Thread: TIWEdit format mask (/thread-3910.html)



TIWEdit format mask - troberts - 02-26-2024

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


RE: TIWEdit format mask - Alexandre Machado - 02-27-2024

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.


RE: TIWEdit format mask - troberts - 02-28-2024

(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.


RE: TIWEdit format mask - Alexandre Machado - 03-01-2024

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


RE: TIWEdit format mask - troberts - 03-10-2024

(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;
}