autoNumeric/autoNumeric

http://autonumeric.org - autoNumeric is a standalone library that provides live *as-you-type* formatting for international numbers and currencies

Alexandre

@AlexandreBonneau

new AutoNumeric.multiple('.itemDiscount', yourOptions); retourns an array of such references, for info

if you did not keep a reference to your AutoNumeric-managed elements, then you will indeed need to 'search' those again, and indeed, AutoNumeric.getAutoNumericElement() is singular and will only get the very first elements

perhaps I could create a AutoNumeric.getAutoNumericElements() (plural) that would return an array of those elements? I'm not sure

couldn't you use

[... document.querySelectorAll('.itemDiscount[data-path]')].forEach(an => AutoNumeric.getAutoNumericElement(an).set(yourValue);}

? or something equivalent?

Amjad Khan

@amjadkhan

Hi, there must be a simple answer to this. I need an input with currency symbol '£', empty value £25,000, min value £25,000, max value £10,000,000 and no decimal places. This config just does not allow me to enter anything.

What am I doing wrong ?

{
currencySymbol: "£",
decimalPlaces: 0,
emptyInputBehavior: "25000",
maximumValue: "10000000",
minimumValue: "25000"
}

Alexandre

@AlexandreBonneau

@amjadkhan well, you are not doing anything wrong here. There is an open issue (autoNumeric/autoNumeric#543) that address that limitation (when setting a minimum value higher than 0), as you saw

AdrienAtHome

@AdrienAtHome

Hi all, I'm currently having issue with window behavior does not exists on react server-side application. This issue could be resolved by proposed PR autoNumeric/autoNumeric#648.
Do you think you could patch this soon ?
Thanks in advance.

taylor85p

@taylor85p

Hello every one,
Autonumeric is not working on input, I know i am not doing it right, Please i need help.

I only want the raw data to be submitted to the database for further calculation after formatting.
Where can i get a link to a step by step usage of this plugin, code below.

Thanks a lot

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.1.0"></script>

<script type="text/javascript">
$(document).ready(function(){
new AutoNumeric('#input', {
currencySymbol : '$',
decimalCharacter : ',',
digitGroupSeparator : '.',
});
</script>

</head>
<body>

<form>
<input type="text" value="" id="input"/>
</form>

</body>
</html>

Alexandre

@AlexandreBonneau

@AdrienAtHome I'm currently without a proper internet connection, so I'm not able to work on AutoNumeric currently.
I should get back Internet in about 2 weeks, sorry

Hey @taylor85p, first, you do not need jquery anymore to use AutoNumeric. I would suggest putting your script tag after the body one, just to be sure everything is loaded

if you want to submit raw numbers, then check the formSubmitJsonNumericString() function for instance

there are other form-related functions you can check here

Mikołaj Wolicki

@MIKOLAJW197

Hi! I have question about configuring Autonumeric.js, cause I have little problem. Is it possible to configure it like this: {
decimalCharacter: ",",
decimalCharacterAlternative: ".",
digitGroupSeparator: " "
} BUT! also add and option when I paste for example value 10.12 it will change it for 10,12 ? (Now it is changing it for 1 012,00, which in my case is wrong behaviour). Hope to hear from you soon! :)

Alexandre

@AlexandreBonneau

hey @MIKOLAJW197 , mention me next time I'll better see your message!

about what you are asking, it indeed would seem logical if you paste a . that it would convert it to a , since no points are used as the digitGroupSeparator

could you please open an issue about that?

Mikołaj Wolicki

@MIKOLAJW197

Hi! @AlexandreBonneau I think there is Issue opened - autoNumeric/autoNumeric#424. I just used the idea from 'vecss' comment and it worked fine.

Alexandre

@AlexandreBonneau

ah indeed

Gabriel Stellini

@gabrielstellini

@AlexandreBonneau is leadingZero:'keep' working?

If I try it out here:

https://stackblitz.com/edit/ng-autonumeric-dcrgzh

I can enter values with a leading 0

But once I click away, they disappear

ABRAHAM Morgan

@Geekimo

Hello,

is there a way for an input to support both percentages and number values ?
I'm in a case that a user can type a plain value or a percentage, but I can't find a way to support both.

linhnvhicts

@linhnvhicts

Hi, i just recently use your js library and it's wonderful! Now i'm trying to implement it with input range in a form and i'm currently having trouble with setting the raw value , i already made a question of this topic on SO https://stackoverflow.com/questions/58481789/jquery-using-autonumeric-with-slider-range . If you can take a look that would be awesome :)

wesleyi23

@wesleyi23

Noob question: I have a complex group of forms with prepopulated values. Is there a nice clean way to get the initial values from each form field and add them to AutoNumeric?

Alexandre

@AlexandreBonneau

@Geekimo unfortunately no; an input only has one set of option at anytime. However you could create a script to update those options on the fly based on your personal conditions

Thom Dunaway

@td234

Noob question: I am trying to initialize this for multiple inputs and want the NorthAmerican options. Here is what I have tried.

This works, but no dollar signs

    new AutoNumeric.multiple('input.rate', { modifyValueOnWheel: false });

These do not work

    new AutoNumeric.multiple.northAmerican('input.rate', { modifyValueOnWheel: false });

new AutoNumeric.multiple.northAmerican('input.rate', { modifyValueOnWheel: false }, dollarPos);

Any help is greatly appreciated.

Alexandre

@AlexandreBonneau

@td234 you can use the following :

new AutoNumeric.multiple('input.rate', ['dollar', { modifyValueOnWheel: false }]);

If you want only positive numbers, try :

new AutoNumeric.multiple('input.rate', ['dollarPos', { modifyValueOnWheel: false }]);

May Weather

@namnguyen2091

I dont want to set minimumValue but I have a range number, and then when I clear input, instead of display min value or previous value, I want to it display empty and onchange event is always fire. How should I do?

Thom Dunaway

@td234

@AlexandreBonneau Thank you!!

taianrj

@taianrj

Hello! I'm trying to use the 'change' event, as I see that Vue AutoNumeric supports it, but it's not working, the event is not called.

<vue-autonumeric v-model="Produto.PrecoFob" v-on:change="atualizarCalculos"></vue-autonumeric>

If I use 'input' event, it is called.

What can I do to make change event work?

Alexandre

@AlexandreBonneau

@taianrj would you have a codepen to show us the problem?

@namnguyen2091 what is your range? Is 0 included in that range? Do you have a codepen that shows the behavior you are describing?

oscaroxy

@oscaroxy

Hi, I would to union autoNumeric with jQuery, but don't find how. I used autoNumeric 1.9 like $dom.autoNumeric('get'); I would to have something similar in order to not change all whole code of my project (it's big). Do it exist?

oscaroxy

@oscaroxy

I saw jQuery.data(...) in order to union $dom element of jQuery with anElement of autoNumeric, but I think this solution hasn't a good performance.

Alexandre

@AlexandreBonneau

@oscaroxy check out our guide to migrate from the old unsupported 1.9* to version 4 : https://github.com/autoNumeric/autoNumeric/blob/next/doc/HowToUpgradeToV4.md

I'd say you do not need to 'union' jquery and AutoNumeric (the jquery dependency has been dropped for a simple reason ; jQuery is not much needed anymore with all the major browser supporting more or less the latest html/css/js standards)

please go have a look at the guide, and come back here if you have any further questions

oscaroxy

@oscaroxy

thanks for the reply, but when I apply autoNumerti to $('.currency'), after I have to populate my Model Object, How do I get the value of autoNumeric?

I try this: $('.currency').each(function(){
var myObj.value = AutoNumeric.getAutoNumericElement(this).get();
});

without change many code from my project... this was the reply of my question. Thanks @AlexandreBonneau, I love AutoNumeric :-)

Alexandre

@AlexandreBonneau

well, first you would initialize AutoNumeric like this : let an = new AutoNumeric('.currency')

then if you want to get the value of that single field, then you can get the value using all the get* variants, like let myVal = an.getNumericString()

(or getNumber(), or getFormatted() etc.)

do note that, as stated in the migration guide, using new AutoNumeric('selector') will initialize only the very first element it finds with that selector

if you want to initialize multiple DOM elements, then you need to use let anArray = AutoNumeric.multiple('.currency')

Alexandre

@AlexandreBonneau

then if you want to get all the value of all those elements, you already have all the references to the AutoNumeric objects in anArray, so you could do:

anArray.foreach(an => console.log(an.getNumber()));

it really depends on what you want to do with those values

Where communities thrive

People

Repo info

Activity