0

Страница написана на vue хотелось бы при вводе в input поле вводить обычный текст но при этом что бы автоматом подставлялось некая константа там же. Т.е начинаю я вводить допустим subdomain, в инпуте уже появляется после первой же буквы subdomain.domain.io. И при этом каретку для ввода оставлять перед константой которую мы подставляем что-бы постоянно не тыкать мышкой. Набросал вот такой вариант, вешаю его на событие инпут но у меня каретка прыгает то в нужную точку то в конец, и еще появляется нежелательная буква в конце.

const textField = {
  props: {
    name: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'text'
    },
    label: String,
    value: { 
      required: false
    },
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      },
    },
  },
  template: `
    <div class="form-group">
      <label class="form-control-label">{{ label }}</label>
      <div class="input-group input-group-merge">
        <input 
          :type="type" 
          class="form-control" 
          :id="'input-' + name" 
          v-model="model">
      </div>
    </div>`,
}

new Vue({
  el: '#app',
  components: {
    'text-field': textField,
  },
  data() {
    return {
      form: {
        slug: null,
      }
    }
  },
  methods: {
    inputSlug() {
      const slug = this.form.slug.split('.');
      if( slug[0] ) {
        this.form.slug = slug[0] + '.domain.io';
      } else {
        this.form.slug = null;
      }
      document.getElementById('input-slug').focus();
      document.getElementById('input-slug').setSelectionRange(slug[0].length, slug[0].length);
    },
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<div id="app">
  <text-field @input="inputSlug" name="slug" v-model="form.slug"/>
</div>

2
  • а может блок else вообще убрать? П.С. Вы бы привели воспроизводимый пример
    – Dmytro
    1 окт 2019 в 10:21
  • @Дмытрык добавил рабочий пример. else нужен что бы совсем убрать все при удалении вводимой строки 1 окт 2019 в 10:54

1 ответ 1

1

Установление местоположения каретки перенесите в setTimeout

const textField = {
  props: {
    name: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'text'
    },
    label: String,
    value: { 
      required: false
    },
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      },
    },
  },
  template: `
    <div class="form-group">
      <label class="form-control-label">{{ label }}</label>
      <div class="input-group input-group-merge">
        <input 
          :type="type" 
          class="form-control" 
          :id="'input-' + name" 
          v-model="model">
      </div>
    </div>`,
}

new Vue({
  el: '#app',
  components: {
    'text-field': textField,
  },
  data() {
    return {
      form: {
        slug: null,
      }
    }
  },
  methods: {
    inputSlug() {
      const slug = this.form.slug.split('.');
      if( slug[0] ) {
        this.form.slug = slug[0] + '.domain.io';
      } else {
        this.form.slug = null;
      }
 setTimeout(()=>{
   document.getElementById('input-slug').focus();
   document.getElementById('input-slug').setSelectionRange(slug[0].length,slug[0].length);
   },0)
      
    },
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<div id="app">
  <text-field @input="inputSlug" name="slug" v-model="form.slug"/>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.