TIWEdit format mask

[troberts]

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

[Alexandre Machado]

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.

[troberts]

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.

[Alexandre Machado]

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


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

Cheers

[troberts]

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