Question

我希望在特定输入上有一个输入掩码，用于将用户输入解析为人类可读的美国电话号码。

例如

用户输入：1231231234 用户看到：（123）-123-1234

到目前为止，我做了一个像下面这样的手表方法

switch (this.form.values.primary_phone.length) {
        case 3:
          return this.form.values.primary_phone = this.form.values.primary_phone.replace(/^([0-9]{3})$/, '($1)');
        case 6:
          return this.form.values.primary_phone = this.form.values.primary_phone.replace(/^([0-9]{3})([0-9]{3})$/, '($1)-$2');
        case 10:
          return this.form.values.primary_phone = this.form.values.primary_phone.replace(/^([0-9]{3})([0-9]{3})([0-9]{4})$/, '($1)-$2-$3');
      }

现在只有当我从输入中聚焦时才会更新该值。有什么方法可以在输入仍处于焦点时进行更新吗？

Answer 1

我建议你做一个包裹jquery plugin input mask的指令。

有一个例子：

<强>的JavaScript

Vue.directive('input-mask', {
  params: ['mask'],

  bind: function() {
    $(this.el).inputmask({
      mask: this.params.mask
    });

  },
});

var vm = new Vue({
  el: 'body',
  data: {
    value: '',
  }
});

<强> HTML

<!-- Import Styles/Scripts from the plugin and do not forget the jQuery library -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

<p>Selected: {{value}}</p>
<input v-model="value" v-input-mask mask="(999) 999-9999">

如果您需要，可以使用JSBin向您展示它的工作原理。

Answer 2

为此，您必须在输入中定义custom filter。像这样的东西

Vue.filter('mask', function (value) {
  if (value.length <= 3){
    var re = new RegExp("^([0-9]{"+value.length+"})$");
    return value = value.replace(re, '($1)');
  } 
  if (value.length > 3 && value.length <= 6){
    var re = new RegExp("^([0-9]{3})([0-9]{"+ (value.length - 3)+"})$");
    return value = value.replace(re, '($1)-$2');
  }
  if (value.length > 6 && value.length <= 10){
    var re = new RegExp("^([0-9]{3})([0-9]{3})([0-9]{"+(value.length-6)+"})$");
    return value = value.replace(re, '($1)-$2-$3');
  }
    return value;
})

然后将其应用于您的模板。我制作了jsfiddle（基于Vue页面的markdown example）

请注意，您仍然必须处理长度大于10的值，并且我还将您的函数更改为使用if语句而不是switch-case

Answer 3

我使用text-mask插件，该插件具有与JQuery相同的强大功能，而没有Jquery膨胀。

Github在这里：https://github.com/text-mask/text-mask

此处的语音指令：https://github.com/text-mask/text-mask/tree/master/vue

const MaskedInput = window.vueTextMask.default
new Vue({
    el: '#app',
    components: { MaskedInput },
    data: {
        phone: '',
        mask: ['(', /\d/, /\d/,/\d/, ')', '-', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-text-mask@6.1.2/dist/vueTextMask.min.js"></script>
<div id="app">
    phone:
    <masked-input v-model="phone" :mask="mask" placeholder="(___)-___-____"></masked-input>
</div>

Vue js输入掩码

3 个答案: