如何解决格式化input的值导致光标位置？-灵析社区
生成头像大佬们，二次封装了vant的组件，主要效果是用户输入的银行卡号自动4位分割出来一个空格，给后端提交数据的时候呢又是去掉空格的，功能是没问题，但是如果在input中间添加或者删除内容时光标会自动跳到末尾去，如何计算光标位置太难了，求助大佬们，非常感谢 export default { inheritAttrs: false, model: { event: 'filtered' }, props: { value: { default: '' }, }, data() { return {} }, computed: { innerValue: { get() { return this.value.replace(/\D/g, '').replace(/(\d{4})(?=\d)/g, '$1 ') }, set(value) { this.$emit('filtered', value.replace(/\D/g, '')) } } }, methods: {} }
感觉对了
export default {
inheritAttrs: false,
model: { event: 'filtered' },
props: {
value: { default: '' },
},
data() {
return {
oldFormattedValue: '' // 保存上一个格式化值
}
},
computed: {
innerValue: {
get() {
return this.value.replace(/\D/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')
},
set(value) {
const newValue = value.replace(/\D/g, '');
this.$emit('filtered', newValue);
this.adjustCursorPosition(newValue);
this.oldFormattedValue = this.innerValue;
}
}
},
methods: {
adjustCursorPosition(newValue) {
const input = this.$refs.inputField.$el.querySelector('input');
const oldPos = input.selectionStart;
// 计算旧格式化值和新格式化值之间的差异
const oldFormattedValueDiff = this.oldFormattedValue.slice(0, oldPos).split(' ').length - 1;
const newFormattedValueDiff = this.innerValue.slice(0, oldPos + oldFormattedValueDiff).split(' ').length - 1;
const diff = newFormattedValueDiff - oldFormattedValueDiff;
// 调整光标位置
const newPos = oldPos + diff;
input.setSelectionRange(newPos, newPos);
}
}
}