Automatically insert a comma for type=number in VueJS

Question

Automatically insert a comma for type=number in VueJS

Is there a method available to automatically insert commas into an input type="number" field in vue js? I need this functionality to trigger the IME options in Microsoft and prevent users from inputting Japanese characters.

<ui-textbox label="initial" v-model="initial_cost"
    name="initial_cost"
    v-validate="`numeric|decimal`"
    type="number"
    v-on:keydown="isNumber"
    :maxlength = "18"
    :enforceMaxlength="true"
    value = 0.00
    format="number"
></ui-textbox>

isNumber: function(evt) {            
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        var charval= String.fromCharCode(evt.keyCode);
        console.log(typeof evt);
        if((charCode >= 48 && charCode <= 57) || (charCode >= 96 && charCode <= 105) || charCode == 8 || charCode == 46 ||
        charCode ==36 || charCode ==35){                
            return true;
        }else{
            return false;
        }

If the user enters 1000, the display should show 1,000, 10000 as 10,000, and so forth. I came across a solution to a similar issue here, but it seems like they are using an input type="text" field. Is there a way to implement this for my type="number" field in vue?

javascript vue.js

Answer 1

Answer №1

After some discussion in the comments above, it has been noted that adding a comma to an input with type="number" is not feasible. Only when the input is set as type="text" can the comma be displayed.

To address this issue, one solution is to dynamically change the input type from number to text on focus and blur. This way, users will only be able to enter numbers, and the comma will appear once they have finished typing.

A new reactive variable called inputType can be added to the data section:

  data() {
    return {
      inputType: "text"
    };
  }

Update or add attributes in the ui-textbox component:

<ui-textbox /*...*/ :type="inputType" @focus="inputType='number'" @blur="inputType='text'">
    <!-- ... -->
</ui-textbox>

This approach makes the type attribute dynamic - switching to number on focus and back to text on blur.

Answer 2

After some discussion in the comments above, it has been noted that adding a comma to an input with type="number" is not feasible. Only when the input is set as type="text" can the comma be displayed.

To address this issue, one solution is to dynamically change the input type from number to text on focus and blur. This way, users will only be able to enter numbers, and the comma will appear once they have finished typing.

A new reactive variable called inputType can be added to the data section:

  data() {
    return {
      inputType: "text"
    };
  }

Update or add attributes in the ui-textbox component:

<ui-textbox /*...*/ :type="inputType" @focus="inputType='number'" @blur="inputType='text'">
    <!-- ... -->
</ui-textbox>

This approach makes the type attribute dynamic - switching to number on focus and back to text on blur.

Automatically insert a comma for type=number in VueJS

Answer №1

Similar questions

Enhancing the "click-to-pause" feature with jQuery Cycle

Genvalidator: Validate forms by checking for checkbox selection

Steps to creating a nested function

AngularJS $cookies version 1.6.9 experiencing functionality issues

Unlocking the secrets of integrating Vuex store with JavaScript/TypeScript modules: A comprehensive guide

Combining multiple arrays of arrays in JavaScript

Is it possible to move between textboxes using arrow keys in HTML?

Using jQuery to select elements with specific innerHTML values

Drag and Drop in Angular with Dragula - Trigger Confirmation on Drop Event

Iterate through HTML content and utilize JavaScript along with Regular Expressions to substitute specific strings

Do we need to use parseInt for the '*' operator in JavaScript?

AngularJS - encountering a 404 error when reloading the page after removing the Hashbang

When using the v-for directive with an array passed as props, an error is

Delivering Background Videos with Node.JS

Verify your identity using Google reCaptcha during Passport authentication

css problem with scaling in firefox

Using grid-template-areas in ReactJS function components does not function as expected

I am having difficulty retrieving all the cssRules for certain pages

The E.js Template encountered an error with an unexpected token "else"

Executing code only after the completion of the .ajax function (outside of the .ajax function)