Maskedit too restrictive

[Johann Permanne]

Hello,

I'm trying to use a maskedit on a text box like this :

I want the user to be allowed to input from 1 to 3 digits before decimal and only one digit after decimal. But with the given example mask, the user is forced to always input 3 digits before decimal.

Is there a way to do what I'd like to ?

EDIT : sorry, EJ1 thread, not EJ2

[Ashokkumar Balasubramanian]

Hi Johann, 

 

Good day to you. 

 

We have analyzed your requirement to the entering specific format value from EJ1 MaskEdit component. By default, your requirement will not match with mask format, so there is no option to handle this case from component level. But, we have achieved your custom value formatting requirement in workaround sample by using keypress() event. For your reference, we have prepared a sample. 

 

In that sample, we have formed a regex expression based on your input requirement. Using the expression, checked the entered input value. 

 

Refer the below code snippet for prevent value during keypress() event. 

 

keyPress: function (args) { 

        var value = args.value; 

        // Regex Expression. 

        var reg = /^\d{0,3}(\.\d{0,1})?$/; 

        if (ej.isNullOrUndefined(value)) value = ""; 

        // Enter the character based on cursor position. 

        var position = args.originalArgs.currentTarget.selectionStart; 

        value = value.substring(0, position) + String.fromCharCode(args.keyCode) + value.substring(position); 

        if (!(reg.test(value))) { 

            // Prevent the character does not match with regular expression. 

            args.originalArgs.originalEvent.preventDefault(); 

        } 

    }, 

 

 

Sample: https://jsplayground.syncfusion.com/poghembx 

 

API link for events : https://help.syncfusion.com/api/js/ejmaskedit#events:keypress 

 

Kindly check the above sample and get back to us if you need any further assistance. 

 

Regards, 

Ashokkumar B. 

[Johann Permanne]

I was also working on Keypress event. Your example is working great ! Thanks a lot.

Edit : there's just a little problem.

In your jsplayground sample example, type 100 value, then select value with mouse, then try to type another number : it's locked...

[Vinoth Kumar Sundara Moorthy]

Hi Johann, 

 

Sorry for the inconvenience. 

 

We have checked your reported query “While entering the character during selection is not working”. In our previous update, we have updated the value of the element based on startIndex. During the text selection the startIndex and endIndex value will differ, so it is not working for the reported case. We have modified the previously provided sample to update the value based on startIndex and endIndex position. Please refer the below code snippet, 

 

Code Snippet  

// Enter the character based on cursor position. 

var startIndex = args.originalArgs.currentTarget.selectionStart; 

var endIndex = args.originalArgs.currentTarget.selectionEnd; 

value = value.substring(0, startIndex) + String.fromCharCode(args.keyCode) + value.substring(endIndex); 

 

For your reference, we have modified the previous sample. Refer the sample link below. 

https://jsplayground.syncfusion.com/rirgayxd 

 

Could you please check the above details and get back to us if you have any further assistance on this? 

 

Regards, 

Vinoth Kumar S 

[Johann Permanne]

That's just perfect !

Thank you very much for your help.

[Vinoth Kumar Sundara Moorthy]

Hi Johann, 

  

You are most welcome. Please feel free to contact us if you need any further assistance on Syncfusion components. 

  

Regards, 

Vinoth Kumar S