My Currency mask has got some issues.

When I am typing say 10000 in the field, it formats it as expected 10,000 but the moment i shift focus to another field or press tab. The mask shifts the ma position to the left by 1. i.e. 10,000 bees 1,0000

You can check codepan for the issue, can anyone help me with this?

#

The template:

<v-text-field @keyup="formatCurrency(initialBalance, $event)" :prefix="currency" v-model="initialBalance" label="Balance" :disabled="disabled"></v-text-field>

The method:

formatCurrency (num: any, e: any) {
    num = num + '';
    var number = num.replace(/[^\d.-]/g, '');
    var splitArray = number.split('.');
    var integer = splitArray[0];
    var mantissa = splitArray.length > 1 ? '.' + splitArray[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(integer)){
        integer = integer.replace(rgx, '$1' + ',' + '$2');
    }
    e.currentTarget.value = integer + mantissa.substring(0, 3);
},

My Currency mask has got some issues.

When I am typing say 10000 in the field, it formats it as expected 10,000 but the moment i shift focus to another field or press tab. The mask shifts the ma position to the left by 1. i.e. 10,000 bees 1,0000

You can check codepan for the issue, can anyone help me with this?

https://codepen.io/veer3383/pen/BxqzLb?editors=1010#

The template:

<v-text-field @keyup="formatCurrency(initialBalance, $event)" :prefix="currency" v-model="initialBalance" label="Balance" :disabled="disabled"></v-text-field>

The method:

formatCurrency (num: any, e: any) {
    num = num + '';
    var number = num.replace(/[^\d.-]/g, '');
    var splitArray = number.split('.');
    var integer = splitArray[0];
    var mantissa = splitArray.length > 1 ? '.' + splitArray[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(integer)){
        integer = integer.replace(rgx, '$1' + ',' + '$2');
    }
    e.currentTarget.value = integer + mantissa.substring(0, 3);
},

• javascript
• vuejs2
• vuetify.js

1 Answer 1

You don't need a keyup AND v-model, they may end up creating a conflict. I find it's easier to use a puted value (or a watch with a formatted version).

template:

<div id="app">
  <v-app id="inspire">
    <v-form ref="form" v-model="valid" lazy-validation>
    <v-flex lg3="">
      <v-text-field :prefix="currency" v-model="initialBalanceFormatted" label="Balance" :disabled="disabled"></v-text-field>
      </v-flex>
    </v-form>
  </v-app>
</div>

script:

function formatAsCurrency (value, dec) {
  dec = dec || 0
  if (value === null) {
    return 0
  }
  return '' + value.toFixed(dec).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
}

new Vue({
  el: '#app',
  data: () => ({
    valid: true,
    disabled: false,
    currency: "£",
    initialBalance: null,
  }),

  puted: {
    initialBalanceFormatted: {
      get: function() {
        return formatAsCurrency(this.initialBalance, 0)
      },
      set: function(newValue) {
        this.initialBalance =  Number(newValue.replace(/[^0-9\.]/g, ''));
      }
    }
  }
})

It helps to turn these inputs into separate (reusable) ponents if you have more than one or two.

Here's an example I made a while back that uses ponents that can handle other types like percentage, does formatting only after blured (so your ma is not jumping) and allows to use up and down key for increment/decrement

https://codepen.io/scorch/pen/oZLLbv?editors=1010