Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
TIWEdit format mask
#1
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
Reply
#2
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.
Reply
#3
(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.
Reply
#4
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


.zip   TextInput.zip (Size: 89.33 KB / Downloads: 4)

Cheers
Reply
#5
(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;
}
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)