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/[email protected]"></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/[email protected]"></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 you have read our privacy policy.

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