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

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的数据中添加一个新的反应变量

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

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

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

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