vue 手机分段输入(334分隔)

因为项目需求，需要实现分段输入，即“344”显示，搜索网上，找到一些代码，与产品经理要求的“某品会”的效果还有一段距离，经过分析发现，需要实现以下需求：

1.总长可输入13位字符，数字和空格；

2.当删除空格的时候，拦截事件，如果光标是在字符中间的话，那就将光标往前移一位，即将光标移动到空格前面；而如果光标是在最后面时，那么不进行拦截（主要对参考代码进行这个需求的改造）

3.粘贴时，需要将非数字和非空格的字符删除（ios里复制联系人时会带着空格）

 

完整代码如下：

<div id="app">
    <input v-model="mobile" type="tel" ref="mobile" maxlength="13" @keyup="inputMobile" @paste="inputMobile" @keydown="onKeydown" placeholder="请填写充值手机号"/>
</div>

new Vue({
	el: '#app',
	data: {
		mobile: "",
		telephone: ""
	},
	mounted: function() {},
	watch: {
		telephone(newValue, oldValue) {
			if (newValue > oldValue) {
				if (newValue.length === 4 || newValue.length === 9) {
					var pre = newValue.substring(0, newValue.length - 1)
					var last = newValue.substr(newValue.length - 1, 1)
					this.telephone = pre + ' ' + last
				} else {
					this.telephone = newValue
				}
			} else {
				if (newValue.length === 9 || newValue.length === 4) {
					this.telephone = this.telephone
				} else {
					this.telephone = newValue
				}
			}
		}
	},
	methods: {
		onKeydown(e) {
			var input = e.target;
			var selectionLeft = input.value.substring(input.selectionStart - 1, input.selectionEnd);
			var selectionRight = input.value.substring(input.selectionStart, input.selectionEnd + 1);

            //碰到空格，往前移动一位光标
			var selectionStart = input.selectionStart;
			if (e.keyCode === 8 && selectionLeft === " " && selectionRight) {
				input.selectionStart = selectionStart - 1;
				input.selectionEnd = input.selectionStart;
				e.preventDefault();
			}
		},
		inputMobile(e) {
			this.formatMobile(e)
			this.mobile = this.$refs.mobile.value
		},
		formatMobile(e) {
			let val = this.$refs.mobile.value // 不可直接用this.mobile，第一方便提取该方法降低代码耦合度，第二直接用this.mobile,在输入汉字时按下shift按键会导致无法再输入和删除内容
			let selStart = this.$refs.mobile.selectionStart // 选中区域左边界位置
			let mobileLen = val.length
			let value = this.getValue(e, val).substr(0, 11) // 获取输入/粘贴内容,并截取前11位
			let len = value.length
			if (len > 3 && len < 8) {
				value = value.replace(/^(\d{3})/g, '$1 ')
			} else if (len >= 8) {
				value = value.replace(/^(\d{3})(\d{4})/g, '$1 $2 ')
			}
			this.$refs.mobile.value = value
			if (selStart !== mobileLen) {
				// 设置光标位置
				this.$refs.mobile.selectionStart = this.$refs.mobile.selectionEnd = selStart
			}
		},
		getValue(e, val) {
			let value = ''
			if (e.type === 'keyup') {
				value = val.replace(/\D/g, '');
			} else if (e.type === 'paste') {
				// window.clipboardData：IE浏览器获取剪贴板数据对象
				// event.clipboardData：Chrome, Firefox, Safari获取剪贴板数据对象
				let clipboardData = event.clipboardData || window.clipboardData;
				value = clipboardData.getData('Text'); // 获取剪贴板text格式的数据
				value = value.replace(/\D/g, '')
			}
			return value
		},
	}
})

 

 

 

参考代码：https://www.cnblogs.com/qdwyy/p/10854014.html