主页 / 问题 / 1029923
Accepted
Алексей
Asked:2020-10-01 17:46:50 +0000 UTC2020-10-01 17:46:50 +0000 UTC

在输入字段中输入前缀

  • 772

页面是vue写的，我想在输入框的时候输入纯文本，但是同时在同一个地方会自动替换一些常量。即，我开始输入，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>

javascript

1 个回答

  1. Best Answer

    将插入符号的位置转移到 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>

    • 1

相关问题