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"字段？有什么办法可以将它应用到我的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。

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

1 个答案: