问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

手机号码输入框添加 空格

头像
玉面小飞龙
    16611427

    移动端 手机号码输入框，设置成 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 事件触发的

    htmljavascripthtml5
    阅读 7.5k
    3 个回答
    得票最新
    头像
    wlove
      6.9k3835
      ✓ 已被采纳
      <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>

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

      头像
      yuanxiaowa
        10.1k3938

        你需要记住光标位置，改变之后，重新设置光标位置

        头像
        小翼
          5.9k3627

          因为你在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这个方法就可以了。https://codepen.io/xiaoyi_122...

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题