身份证号码中间显示*星号

身份证号码隐藏

1、html结构

	<div id="root">
			<div class="form-item">身份证号码脱敏（显示前4位和后6位）</div>
			<input class="form-item" type="text" v-model="showValue" placeholder="请输入身份证号码" 
			@input="desenInputText">
			<div class="form-item">输入数据</div>
			<div class="form-item">{{value}}</div>
	</div>

2、js部分

new Vue({
			el: '#root',
			data: {
				showValue: '',
				value: ''
			},
			methods: {
				desenText(str){
					let res = str
					const len = str.length
					let pre4 = ''
					let last6 = ''
					pre4 = str.slice(0,4)
					last6 = str.slice(Math.max(len - 6,4))
					const star = Math.max(0,len-10)
					res = pre4 + '*'.repeat(star) + last6
					return res
				},
				desenInputText(e){
					// 真实值与展示值同步动态转换
					const ind = e.target.selectionStart - 1;
					let value = this.value
					const showValue = this.showValue
					const isAdd = showValue.length > value.length
					const num = Math.abs(value.length - showValue.length)
					if(isAdd){
						value = value.slice(0, ind-num+1) + 
						showValue.slice(ind - num+1,ind+1) + 
						value.slice(ind-num+1);
					}else{
						value = value.slice(0, ind+1) + value.slice(ind+num+1)
					}
					this.value = value
					this.showValue = this.desenText(value)
					// this.$nextTick(()=>{
					// 	const elem = e.target
					// 	if(elem.setSelectRange){
					// 		elem.setSelectionRange(ind+1,ind+1)
					// 	}else{
					// 		const range = elem.createTextRange()
					// 		range.moveStart('character',ind+1)
					// 		range.moveEnd('character', ind+1)
					// 		range.select();
					// 	}
					// })
				}
			}
		})