2

Is there any way I can add comma automatically in input type="number" field in vue js? This is my only way to automatically change the IME options in Microsoft and disallowing the user to input Japanese character.

<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;
        }

so if I the user input 1000, display is 1,000, 10000 to 10,000 and so on. I've seen a solution like this problem here but it seems that he is using input type="text" field? Is there any way I can apply this to my type="number" field in vue?

Improve this question
13
  • This is not supported by all the browsers. You need to have an input with type=text and then validate the number in the javascript I'm afraid. Please check this post. stackoverflow.com/questions/35315157/…. Also, in w3 specifications, they clearly state that this is up to the user agent. w3.org/TR/html50/forms.html#number-state-%28type=number%29 Commented Apr 23, 2018 at 2:15
  • Only numbers and a decimal point are allowed in type number and as @kavindra states about it's up to the user agent so far no major browser has done that. Commented Apr 23, 2018 at 2:21
  • did you try to use that answer with a type="number" and it didn't work ? Commented Apr 23, 2018 at 2:22
  • @Taki Yes, I've already tried it, but failed to make it work. Commented Apr 23, 2018 at 2:23
  • @Kavindra I'm currently having type= text, but my problem is if the user uses japanese keyboard, my validation failed. You can check my concern here: stackoverflow.com/questions/49937171/… Commented Apr 23, 2018 at 2:24

1 Answer 1

Reset to default
4

As discussed in the comment section above, it's impossible to add comma to input with type="number". It can display comma only when input type="text".

You could make the input type number on focus and type text on blur, so that user can't type anything that isn't number, and comma is displayable when the user has finished typing.

add a new reactive variable in data called inputType

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

change/add some attributes in ui-textbox

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

This would make the type attribute dynamic. It would be type number on focus and type text on blur.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

One last thing v-on:keydown="isNumber|maxlength=18" is not doing well. Is that what you meant in the comment section above that I should do to enforce maxLength?　Because my isNumber validation is not working if I do it that way.
@ramedju something like this codepen.io/jacobgoh101/pen/RyWOJG?editors=1011
Thank you very much Jacob from helping me out from very first issue up until here :)　But why can't I delete a number?
@ramedju oh right, my bad. i've added a condition if(isNaN(evt.key)) return; to only check length when the key press is from a number. codepen.io/jacobgoh101/pen/RyWOJG?editors=1011
Thank you very much. You really have saved me :)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.