We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Maskedit too restrictive

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

5 Replies

AB Ashokkumar Balasubramanian Syncfusion Team September 18, 2019 10:19 AM UTC

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(); 
        } 
    }, 
 
 
 
 
Kindly check the above sample and get back to us if you need any further assistance. 
 
Regards, 
Ashokkumar B. 



JP Johann Permanne September 18, 2019 02:16 PM UTC

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


VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 19, 2019 09:02 AM UTC

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. 
 
Could you please check the above details and get back to us if you have any further assistance on this? 
 
Regards, 
Vinoth Kumar S 



JP Johann Permanne September 19, 2019 09:16 AM UTC

That's just perfect !
Thank you very much for your help.


VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 19, 2019 11:01 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon