Maskedit too restrictive

Johann Permanne

Asked On September 16, 2019 12:34 PM UTC

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

Reply | Reply with quote

Ashokkumar Balasubramanian [Syncfusion]

Replied On 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();

}

},

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.

Reply | Reply with quote

Johann Permanne

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

Reply | Reply with quote

Vinoth Kumar Sundara Moorthy [Syncfusion]

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

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

Reply | Reply with quote

Johann Permanne

Replied On September 19, 2019 09:16 AM UTC

That's just perfect !

Thank you very much for your help.

Reply | Reply with quote

Vinoth Kumar Sundara Moorthy [Syncfusion]

Replied On 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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147573	Sep 16,2019 12:33 PM UTC	Sep 19,2019 11:01 AM UTC	jQuery	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US