Применить маску для ввода

Question

Мне нужна маска для ввода, которая должна иметь формат dddd-ddd (почтовый индекс Portuguse), мне не хочется импортировать библиотеку только для этого ввода.

Это то, что у меня сейчас есть:

new Vue({
  el: '#app',
  data: {
    zip_code: '2770-315'
  },
  computed: {
    mask_zip_code: {
      get: function() {
      	 return this.zip_code;
      },
      set: function(input) {
        input = input.replace(/[^0-9-]/g, "");
      	if(input.length >= 4) {
           input = input.substr(0, 4)+'-'+input.substr(5); // in case people type "-"
        }
        this.zip_code = input;
      }
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input v-model="mask_zip_code" maxlength="8">
</div>

Вы можете видеть, что поведение немного странное и позволяет также печатать буквы.

Answer 1

Я обновил ваш фрагмент, чтобы он работал так, как вы и предполагали.Значение computed работает, но оно не будет отражено на входе, вместо этого здесь более уместен метод

new Vue({
    el: '#app',
    data: {
        zip_code: '2770-315'
    },
    methods: {
    mask_zip: function(event) {
        if (event.key && event.key.match(/[a-zA-Z]/)) {
           event.preventDefault()
        } else {
            if(this.zip_code.length >= 4) {
                this.zip_code = this.zip_code.substr(0, 4)+'-'+this.zip_code.substr(5); // in case people type "-"
            }
        }
        return this.zip_code;
    }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input v-model="mask_zip_code" maxlength="8" @keypress="inputValidation">
  {{mask_zip_code}}
</div>

Answer 2

Попробуйте использовать атрибут pattern с регулярным выражением:

<script src="https://unpkg.com/vue"></script>
<form>
  <input v-model="mask_zip_code" pattern="[0-9]{4}-[0-9]{3}">
  <button>Submit</button>
</form>

Это должно помешать пользователям отправлять форму с чем-либо, кроме действительного португальского почтового индекса.