Страница написана на 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>
else
вообще убрать? П.С. Вы бы привели воспроизводимый примерelse
нужен что бы совсем убрать все при удалении вводимой строки