因为项目需求，需要实现分段输入，即“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
