Как сделать отступы при вводе в инпут

Question

Не могу нигде найти как это реализовать, хотел реализовать после ввода двух символов идет пробел ввожу три символа идет пробел опять и так по новой, сначала идет два пробел потом опять три и пробел, нашел через replaсе, но я не могу понять куда нужно вставлять фильтр в vue ?

Answer 1

Вы можете использовать директиву v-model.lazy для обновления значения инпута только при его потере фокуса. Затем, используя JavaScript, вы можете добавить функцию валидации, которая будет добавлять пробелы после двух или трех символов в значении инпута. Например:

<template>
  <div>
    <input v-model.lazy="inputValue" @blur="addSpaces" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    addSpaces() {
      this.inputValue = this.inputValue.replace(/(.{2})/g, "$1 ");
    }
  }
}
</script>

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

БЛОГ НА HUSL

Как сделать отступы при вводе в инпут

Ответы (1 шт):