javascript - vue在type=number中自动添加逗号

Question

有什么办法可以在 vue js 的 input type="number" 字段中自动添加逗号？这是我在 Microsoft 中自动更改 IME 选项并禁止用户输入日文字符的唯一方法。

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

所以如果我用户输入1000，显示是1,000，10000到10,000等等。我见过类似这个问题的解决方案 here但他似乎在使用 input type="text" 字段？有什么方法可以将其应用于 vue 中的 type="number" 字段？

Answer 1

正如上面评论部分所讨论的，不可能在 type="number" 的输入中添加逗号。只有在输入type="text"时才会显示逗号。

您可以使输入类型 number 处于焦点状态并键入 text 处于模糊状态，这样用户就不能输入任何非数字的内容，并且可以显示逗号当用户完成输入时。

在名为 inputType 的数据中添加一个新的 react 变量

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

在 ui-textbox 中更改/添加一些属性

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

这将使 type 属性动态化。在焦点上输入 number，在模糊时输入 text。