【前端】手机号码输入框添加空格

移动端手机号码输入框，设置成 134 6005 1078 自动添加空格形式
问题：【当需要修改其中的数字时（6005），删除该数字后光标会马上跳到数字末尾】
需求：【删除其中的数字后，光标不会跳到最后，能正常修改】
请求各位同事，老师，大神帮忙一下，这个bug挂在我这里好久了，谢谢谢谢！！

代码如下
return function(input, space) {

if (!input) {return ''}
space = space || ' 'input = input.replace(/\s+/g, '') // 去掉所有空格var valArry = input.split('')if (valArry.length > 7) {
valArry = valArry.splice(7, 0, space)
}if (valArry.length > 3) {
valArry = valArry.splice(3, 0, space)
}return valArry.join('');
}

我是用 keyup 事件触发的

回答

<html><head>
<meta charset="utf-8">
<script>

function Mobile(obj,e){ if(e.keyCode == 8) return
var value = obj.value; console.log(value)
value = value.replace(/\s*/g, ""); var result = []; for(var i = 0; i < value.length; i++){ if (i==3||i==7){
result.push(" " + value.charAt(i));
} else{
result.push(value.charAt(i));
}
}
obj.value = result.join("");
} </script>
<style>
div{ height: 100px; background: #ccc; vertical-align: center;
} </style></head><body>
<input type="tel" maxlength="13" id="mobile" onkeyup="Mobile(this,event)" onfocus="value=''" />
<div>
<input type="text">
</div></body></html>

我试着写了写我看符合你的要求我修改了我这边测试没问题

你需要记住光标位置，改变之后，重新设置<a rel="dofollow" href="https://www.fgba.net/" title="QQ靓号购买平台"><span style="color: rgba(77, 77, 77, 1)">QQ靓号购买平台</span></a><a rel="dofollow" href="https://www.fgba.net/sitemap.xml" title="地图"><span style="color: rgba(77, 77, 77, 1)">地图</span></a>光标位置

因为你在keyup的时候，重新给input赋值了，所以光标会定位到最后。
直接上代码。

<input onkeyup="dealKeyup(this);"/>
const getCursortPosition = (ctrl) => { var CaretPos = 0; // IE Support
if (document.selection) {
ctrl.focus(); var Sel = document.selection.createRange();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
} // Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart; return (CaretPos);
}// 设置光标位置const setCaretPosition = (ctrl, pos) => { if(ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
} else if (ctrl.createTextRange) { var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}// 光标定位const dealKeyup = (that) => { var pos = getCursortPosition(that);
setCaretPosition(that,pos - 1);
}

根据自己的需求改改dealKeyup这个方法就可以了。

更多相关文章

随机推荐

【前端】手机号码输入框添加 空格

更多相关文章

随机推荐

【前端】手机号码输入框添加空格