Possible feature request: Minimum and maximum decimal places

[ragulka]

I am working on a project where I need to enable the user to enter a price. The price field should always have at least 2 decimal places, but could contain many more (if dealing with extra-specific and extra-precise prices). The field should always be padded with 2 decimal places, but not more.

The idea is that the user can, if needed, enter more than 2 decimal places, but if they do not, then only 2 decimal places are show.

Is it somehow possible already or if not, perhaps this could be considered as a possible future feature?

[BobKnothe]

I am in the process of modifying autoNumeric to add this feature. This will allow the developer to set the expanded decimal places. The expanded decimal places are shown only when the input has focus and are stored by localStorage. This allows the values to be retained when the page looses focus.

Because these values are stored in memory this will also require a new method to be added to display for form submission.

Hope to work out the bugs by the beginning of August.

[BobKnothe]

I am getting close to releasing version 2.0 that includes the requested feature. Please see the latest version here and give me your thoughts, http://www.decorplanit.com/plugin/beta-2.0/autoNumeric-2.0-BETA.htm

[ragulka]

Nice! Is is possible to always show the extended decimals, not only on focus? For example, if I have eDec set to 5 and I enter 22.22, then I'd like to see 22.22 whether i am focused on the input or not. Also, when I enter 22.12345, I would like to see it whether I am focused on the input or not.

[BobKnothe]

You do not need eDec to accomplish your request - try the following options

$(selector).autoNumeric('init', {mDec: '5', aPad: false}); // 5 is the number of decimal place you desire

or this HTML5 data

data-m-dec="5" data-a-pad=false

[ragulka]

Sorry, I did not explain myself clearly. Here's what I tried: $('#myfield').autoNumeric('init', {mDec: 2, eDec: '5', aPad: true });

If I enter 22.12345, it only shows 5 decimals when I am focused on the field.
If I enter 22.123, it only shows 3 decimals when I am focused on the field.

I would like it to always show the amount of decimals I entered, minimum 2, maximum 5. Both when I am focused on the field, and when not. So if if I enter 22, it will display 22.00. If I enter 22.12, it will display 22.12, if I enter 22.1234, it will display 22.1234

[BobKnothe]

so you only want to pad on two decimal places as below?

22 => 22.00
22.1 => 22.10
22.12 => 22.12
22.123 => 22.123

As autoNumeric is currently written that is not supported. A small script could accomplish your needs.

$(selector).autoNumeric('init', {mDec: '5', aPad: false});

On the focusout event check and see if there are at least two decimal places and if not use jQuery's val method to add zeros.

$(selector).val(this.val + '00');

Let me know if that works for you.

[ragulka]

Hmm, that could work. But do you think it's possible to add support for this? I could try to help contribute.

[ragulka]

@BobKnothe based on your suggestion, I've come up with the following: http://jsfiddle.net/vmo1m7em/, however, it breaks when you enter an integer with no decimals. Ideally, it would be nice if the aPad option could receive a numeric value as input, and this would control how many decimal places will be padded:

• mDec: 5, aPad: false - no padding at all
• mDec: 5, aPad: true - pads 5 decimal places
• mDec: 5, aPad: 2 - pads 2 decimal places
• mDec: 5, aPad: 7 - pads 5 decimal places, since mDec sets the maximum to 5

[ragulka]

Just realized this is already implemented :)

[burzum619]

@ragulka I see that you mentioned this feature is already implemented in the autoNumeric library - but I do not see any reference to min/max decimal places/"0" padding in the current docs. Any chance you can refer me to how to use this feature? I'm trying to accomplish the behavior @BobKnothe spelled out:

MIN: 2, MAX: 3

22 => 22.00
22.1 => 22.10
22.12 => 22.12
22.123 => 22.123

[AlexandreBonneau]

@burzum619 you can only define a fixed number of decimals for a given AutoNumeric element.
It's not possible to have a different number of decimals shown based on the element value.
You can either decide to show the padding with allowDecimalPadding or not (check the examples on http://autonumeric.org/guide).

You can however define different numbers of decimals to be shown on blur (decimalPlacesShownOnBlur) and on focus (decimalPlacesShownOnFocus) if that could help you.

[burzum619]

@AlexandreBonneau Thanks for the quick response. Unfortunately I'm sure that is quite what I'm looking for. Perhaps I'll have add some custom code in my component to address this after autoNumeric has formatted the input value. Looks like I'll have to listen in on the autoNumeric:formatted event and edit the value there.

[tomas-net]

@burzum619 Do you have any code / autoNumeric extension / patch which will enable above described feature?

I need something very similar:
22 => 22
22.1 => 22.10
22.12 => 22.12
22.123 => 22.123

[AlexandreBonneau]

@tomas-net what you are trying to do can be achieved by using the { allowDecimalPadding : 'floats' } option (see the official example).

[tomas-net]

@AlexandreBonneau Maybe I am doing something wrong. I have

{
allowDecimalPadding : 'floats',
decimalPlaces : 2
}

And for value in input I get this:
22 => 22 - OK
22.1 => 22.10 - OK
22.12 => 22.12 - OK
22.123 => 22.12 - NOT OK

To be more precise, I can't even enter 22.123, I can enter only two decimal places. If I generate <input type="text" value="22.123" /> on server I get 22.12 which is not OK. What I need is: user can enter number with up to 2 decimal places but server-generated data can contain more than 2 decimal places and I must be able to show them to users. So what I am doing wrong?

[AlexandreBonneau]

What you are asking here is a use case we never encountered before, ie. wanting :

• a specific number of decimal places which should be padded with 0 if there is a decimal part
• no decimal points nor decimal places nor 0 padding with there is no decimal part (so far this is what the allowDecimalPadding set to 'floats' does)
• and being able to add as many additional decimal places.

This is not possible with AutoNumeric.
You can specify a fixed number of decimals for the rawValue, shown on blur and shown on focus.

If you want this feature, we would consider a PR ;)

About you last question ; you want the server to be able to keep more decimals than your user can enter, is this really what you want?
If this is really your use case, you could use decimalPlacesShownOnBlur set to 4 for instance, and decimalPlacesShownOnFocus set to 2.

[ragulka]

@AlexandreBonneau I was planning to upgrade to v4, but noticed that the allowDecimalPadding option no longer accepts a number. The equivalent option aPad in v1.9 did support providing a number.

I didn't notice anything in the upgrade guide or changelog about removing this functionality, which is essentialy a breaking change.

I wonder what was the reasoning to remove this and whether there's an alternative I'm not aware of?

[AlexandreBonneau]

@ragulka please create a new issue if you encounter a new problem

allowDecimalPadding (or aPad) before has been changed so that you can either choose when you want AutoNumeric to pad the decimals (see the documentation).

The upgrade guide do mention how decimals are set now.

If you want to be able to define the number of decimals, you need to checkout the decimalPlaces option.
This has been done to make options more consistent with one option allowDecimalPadding to decide if and how to pad the decimals, and decimalPlaces (and its variants) to define how many decimal places you want.

[artifex-pro]

@tomas-net Did you solve it?

@AlexandreBonneau Did you solve the issue of tomas? If so could you share with me on how I could accomplish this issue?

I want it to be possible that if I set the value programmatically that it formats to 4 decimals. But whenever you type it should be allowed to set more than 4 decimals. Looking forward to your reply!

[tomas-net]

@dion96 I came up with the following solution. I am not happy about it but it seems to work if I remember correctly.

$(document).on('autoNumeric:formatted', function(e) {
  var anElement = e.originalEvent.detail.aNElement;
  var oldValue = e.originalEvent.detail.oldValue;
  var newValue = e.originalEvent.detail.newValue;

  if(oldValue === undefined)
    return;

  var oldValueDecimalPointIndex = oldValue.indexOf(autonumericOptions.decimalCharacter);

  if(oldValueDecimalPointIndex === -1)
    oldValueDecimalPointIndex = oldValue.indexOf(autonumericOptions.decimalCharacterAlternative);

  var newValueDecimalPointIndex = newValue.indexOf(autonumericOptions.decimalCharacter);

  if(newValueDecimalPointIndex === -1)
    newValueDecimalPointIndex = newValue.indexOf(autonumericOptions.decimalCharacterAlternative);

  if(oldValueDecimalPointIndex === -1 && newValueDecimalPointIndex === -1)
    return;

  var oldValueDecimalPart = oldValueDecimalPointIndex !== -1 ? oldValue.slice(oldValueDecimalPointIndex + 1) : '';

  if(oldValueDecimalPart.length > autonumericOptions.minimumDecimalPlaces) {
    try {
      anElement.setUnformatted(newValue.slice(0, newValueDecimalPointIndex) + autonumericOptions.decimalCharacter + oldValueDecimalPart.slice(0, autonumericOptions.maximumDecimalPlaces));
    }
    catch (e) { }
  }
});