2

I have a textfield with input only and no max limit set on the size of the input. Now when I enter large numbers the number gets converted into 1e notation. ex:

enter image description here

I;m using EXTJs as my code base: code:

$cls.superclass.constructor.call(this, Ext.apply({
        items: [
            this.section({
                items: [{
                    xtype: 'container',
                    items: [
                        this.limit = new Ext.form.NumberField({
                            cls: "limit-number-field",
                            allowBlank: false,
                            allowNegative: false,
                            allowDecimals: false,
                            width: 150
                        })
                    ]
                }]
            })
        ]
    }, cfg));

also here are the logs of the numbers I have tried with toFixed() enter image description here

and they all give me same o/p. not sure what im doing wrong here.

how to prevent this from happening. I want the number to be there in the input field as is.

PS> I referred to How to avoid scientific notation for large numbers in JavaScript? but this did not work for me. any ideas?

Pointy
  • 405,095
  • 59
  • 585
  • 614
user1234
  • 3,000
  • 4
  • 50
  • 102
  • What exactly did not work from that other question? Numbers aren't "converted" to scientific notation; it's just a display convention. Ultimately a JavaScript number *must* be converted to a string in order to be shown as the value of an `` because `` values are *always* strings. – Pointy Jun 03 '19 at 23:56
  • Save and display user input as-is typed. Nothing will be converted. – m1k1o Jun 03 '19 at 23:57
  • @M1K1O: I did not get your comment. what do you mean?. – user1234 Jun 04 '19 at 00:04
  • @user1234 you will treat user input as ordinary string. And then in your business logic convert it to number. – m1k1o Jun 04 '19 at 00:07
  • @Pointy: I mean that I tried: ```function financial(x) { return Number.parseFloat(x).toFixed(2); }``` and then ```console.log(financial('1.23e+5'));``` it gives me: 123000.00, but not the number that I originally entered. this causes conflicts when sending a payload to the server. – user1234 Jun 04 '19 at 00:12
  • But `1.23e+5` is in fact `123000.00`. – Pointy Jun 04 '19 at 00:16
  • @Pointy: updated my question with a screenshot – user1234 Jun 04 '19 at 00:23
  • Numbers that are that large after going to lose precision. Easiest way to deal with it is to restrict the input to 16 characters. Or use https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt – Ruan Mendes Jun 04 '19 at 00:31
  • I think this is really an ExtJS issue. – Pointy Jun 04 '19 at 01:07
  • I think you are using numberfield of extjs. If you want to support larger numbers, use an Ext.form.TextField that only allows numbers to be entered (so the final value is a String and not a Number) – Jaydeep Jun 04 '19 at 07:31
  • @Jaydeep: I could have used Ext.form.TextField({}), but I want to restrict decimals and negative numbers being entered into the field and I'm not sure if textfield provides that ability, I know NumberField does and hence used that – user1234 Jun 05 '19 at 00:14

1 Answers1

2

If you just want a textfield that allows the user to type a long string of digits without any formatting you could use a textfield with maskRe. This will allow the user to only type characters that match the regular expression in the mask.

Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
items: [{
    xtype: 'textfield',
    fieldLabel: 'Number',
    maskRe: /[0-9]/
}]

});

see fiddle here

chrisuae
  • 1,092
  • 7
  • 8