Automatically add comma in type=number vue

Question

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?

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. https://stackoverflow.com/questions/35315157/html5-input-box-with-type-number-does-not-accept-comma-in-chrome-browser. Also, in w3 specifications, they clearly state that this is up to the user agent. https://www.w3.org/TR/html50/forms.html#number-state-%28type=number%29 — Kavindra, Apr 23 '18 at 02: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. — Darkrum, Apr 23 '18 at 02:21
did you try to use that answer with a `type="number"` and it didn't work ? — Taki, Apr 23 '18 at 02:22
@Taki Yes, I've already tried it, but failed to make it work. — , Apr 23 '18 at 02: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: https://stackoverflow.com/questions/49937171/event-preventdefault-not-working-in-japanese-keyboard-vue — , Apr 23 '18 at 02:24
@ramedju no it's not. You can't insert a comma into input type number. — Darkrum, Apr 23 '18 at 02:28
@ramedju you have come a long way for this problem. =] I have a stupid/smart idea. how about making the input type `number` on focus and type `text` on blur ? — Jacob Goh, Apr 23 '18 at 02:54
@JacobGoh Yes, so stupid for me to have come this far. Haha, anyways, what do you mean? — , Apr 23 '18 at 02:57
@ramedju this is indeed a difficult problem to solve. Don't put yourself down. for e.g. `:type="inputType"`, where `inputType` is a reactive variable, the value can be `text` or `number`. change the value of `inputType` on focus & blur. `@focus="inputType='number'"` `@blur="inputType='text'"`. when the input type is text, showing comma would become possible — Jacob Goh, Apr 23 '18 at 03:01
@JacobGoh it now works, but it exceeded with my maxlength :S HAHA, too many problem for this lil issue. it also has a warning: `Property or method "inputType" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.` — , Apr 23 '18 at 03:13
you can add another length validation on keydown. you'll need to add `inputType` to `data` as well — Jacob Goh, Apr 23 '18 at 03:18
@JacobGoh Please add your comments as an answer :) Will accept it. Thank you very much. — , Apr 23 '18 at 03:21

score 4 · Accepted Answer · answered Apr 23 '18 at 03:30

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.

answered Apr 23 '18 at 03:30

Jacob Goh

19,800
5
53
73

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. – Apr 23 '18 at 03:33
@ramedju something like this https://codepen.io/jacobgoh101/pen/RyWOJG?editors=1011 – Jacob Goh Apr 23 '18 at 03:44
Thank you very much Jacob from helping me out from very first issue up until here :)　But why can't I delete a number? – Apr 23 '18 at 03:53
1

@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. https://codepen.io/jacobgoh101/pen/RyWOJG?editors=1011 – Jacob Goh Apr 23 '18 at 04:05
1

Thank you very much. You really have saved me :) – Apr 23 '18 at 05:02
One last problem, because if the input box has data, I have to double click it first before I can edit it. Do you have any idea why this happens? Is this because of `@focus` and `@blur` events? – Apr 24 '18 at 09:50
@ramedju it's not happenning here. https://codepen.io/jacobgoh101/pen/RyWOJG?editors=1011 . it's probably caused by something else – Jacob Goh Apr 24 '18 at 09:52
Can you please add some value on the field? I can't add any :) so that I can try there. – Apr 24 '18 at 09:56
Weeew, I think my problem now is on my end, coz if i click on the field, the cursor just blink once and the focus is gone again :S – Apr 24 '18 at 10:09

Automatically add comma in type=number vue

1 Answers1