I want to distinguish between the input value and the displayed value in TextBox

[fingate]

Hello,

When I use TextBox in Navtive components of Vue3, I want to distinguish between the input value and the displayed value.

For example,
I uesd TextBox like this.

<TextBox v-model="inputValue" />

If I enter "1234567", "1,234,567" will be displayed. but inputValue has "1234567".
or
If I enter "AbcD", "abcd" will be displayed. but inputValue has "AbcD".

Can I only change the displayed value while maintaining the value I entered?
ps... I don't want use the NumericTextBox. because of lowercase and uppercase.

[Filip]

Hello, fingate,

I understand that besides distinguishing between the input and displayed value, you wish to format the display value is that correct? 

If this is the case I can recommend putting the TextBox in controlled mode via the value prop, this will enable you to display the value as required and keep the original value that is inputted. I have created an example that showcases this approach here:

https://stackblitz.com/edit/fdnzsb-tk2yt9?file=src%2Fmain.vue

Here I am console.logging the rawValue that is obtained via `event.target.value`  and the display value is formatted in the formatValue function:

 formatValue(value) {
     return value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 }

I hope this helps.

Regards,
Filip
Progress Telerik