Masking numeric values ​​using autoNumeric and Knockout

In general, I had the task to rewrite one of the controls built on the repeater and make it easier, more responsive for the client. At the same time I decided to use knockout. Inside, DevExpress's text fields were used to display digital data, they are very convenient and served properly, but then the question arose, what about when replacing with regular text fields, I can add a mask.

Start

')
In order to solve this problem, I began to look for what are the normal jquery plugins or libraries that will allow you to quickly and easily solve the problem. As a result, I found two libraries:

• Jquery plugin jquery.maskedinput plugin page jquery.maskedinput
• AutoNumeric library autoNumeric library page

Analysis

Looking at the capabilities of the libraries, I could say for sure that I would use autoNumeric , since it has the ability not to show the input mask, but to process the input value on the fly. Its behavior is similar to the behavior of the text box DevExpress. The jquery.maskedinput plugin, unfortunately, did not find such an opportunity. There is only the possibility of entering data using a strict mask, which then appears in the text field, informing the user about the upcoming input format. For my case, this treatment is not suitable.

Application

Well, with the choice of the data masking library in the text field, I decided, but how can I tie a mask for the fields. First there was the idea to set a specific class for all required fields using a single input format, and then use the jquery to feed the autoNumeric library. But it seemed to me that this decision would not be very convenient.
Then I thought, why not use the power of knockout! Since knockout allows you to implement custom handlers for data binding, I decided to create just such a handler and specify it in the data-bind="" attribute.

Little about autoNumeric

I give the value of some useful methods used by me in solving the problem:

• The autoNumeric() method allows you to activate auto-masking on the specified element using a selector, for example, like this: $('.autonum').autoNumeric();
• The autoNumericGet(); method autoNumericGet(); - allows you to get a value that can be used in arithmetic operations (ie, the value freed from the delimiters that decorate the input data). For example: $(selector).autoNumericGet();
• Method autoNumericSet(value); - processes the value , decorating it with the necessary delimiters, for the beauty of the output of numbers. For example, $(selector).autoNumericSet(value);

I give the value of the options passed to the autoNumeric() method as a parameter:

• aSep - indicates which delimiter will be used for hundreds
• aDec - indicates which separator will be used for the fractional part
• mDec - indicates how many digits will be indicated after the fraction separator

An example of the transfer, used by me options, to configure autoNumeric:

 $('.autonum').autoNumeric({ aSep: ',', aDec: '.', mDec: 0 }); 

* This means that autoNumeric will use ',' for the separator of hundreds of the whole part and '.' as a fraction separator. Also, the number of digits after the fractional separator will be 0 (i.e. whole numbers will be displayed).

Implementation using knockout

Implementing a custom data binding handler for autoNumeric

  ko.bindingHandlers.numberMaskedValue = { init: function(element, valueAccessor, allBindingsAccessor) { //  ,    , //     var options = allBindingsAccessor().autoNumericOptions || { aSep: ',', aDec: '.', mDec: 0 }; // html       $(element).autoNumeric(options); //   'focusout' , //     observable  ko.utils.registerEventHandler(element, 'focusout', function() { var observable = valueAccessor(); //        value = $(element).autoNumericGet(); observable(isNaN(value) ? 0 : value); }); }, update: function(element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); //   ,   ,  $(element).autoNumericSet(value); } }; 

The above implementation allows using this handler in this way:

 <input type="text" data-bind="numberMaskedValue: countOfFriends"/> 

or with options:

 <input type="text" data-bind="numberMaskedValue: countOfFriends, autoNumericOptions:{aSep: ',', aDec: '.', mDec: 3}"/> 

In this example handler, the value will be updated at the event 'focusout' . For the user, the entered value will look beautiful, and in a real observable property, it will remain suitable for arithmetic processing. Thus, I can immediately solve two problems: binding the desired (transfer) autoNumeric control, and passing (updating) the value in the observable property.

Links

• A full example of using this custom handler on jsFiddle . In the implementation, you can clearly see the real value stored in the field and the value displayed in the text field for the user.

Thanks for attention!