手機(jī)號(hào)碼輸入框添加空格

移動(dòng)端手機(jī)號(hào)碼輸入框，設(shè)置成 134 6005 1078 自動(dòng)添加空格形式
問題：【當(dāng)需要修改其中的數(shù)字時(shí)（6005），刪除該數(shù)字后光標(biāo)會(huì)馬上跳到數(shù)字末尾】
需求：【刪除其中的數(shù)字后，光標(biāo)不會(huì)跳到最后，能正常修改】
請求各位同事，老師，大神幫忙一下，這個(gè)bug掛在我這里好久了，謝謝謝謝?。?/p>

代碼如下
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 事件觸發(fā)的

回答

編輯回答

脾氣硬

你需要記住光標(biāo)位置，改變之后，重新設(shè)置光標(biāo)位置

2018年4月6日 20:20

編輯回答

野橘

因?yàn)槟阍趉eyup的時(shí)候，重新給input賦值了，所以光標(biāo)會(huì)定位到最后。
直接上代碼。

<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);
}
// 設(shè)置光標(biāo)位置
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();
    }
}
// 光標(biāo)定位
const dealKeyup = (that) => {
  var pos = getCursortPosition(that);
  setCaretPosition(that,pos - 1);
}

根據(jù)自己的需求改改dealKeyup這個(gè)方法就可以了。https://codepen.io/xiaoyi_122...

2017年12月17日 07:17

編輯回答

瞄小懶

<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>

我試著寫了寫我看符合你的要求我修改了我這邊測試沒問題

2017年10月16日 16:26