移动web处理input输入框输入银行卡号四位一空格

由于项目上有需求要求输入银行卡号四位一空格的需求，改过好几版发现都有bug,最后优化了一版看起来效果还行，发帖留存。

难点是从中间插入和删除处理光标问题。

首先需要用到获取光标和设置光标的方法。

 // 获取光标位置

 function getCursortPosition(textDom) {

     var cursorPos = 0;

     if (document.selection) {

         // IE Support

         textDom.focus();

         var selectRange = document.selection.createRange();

         selectRange.moveStart('character', -textDom.value.length);

         cursorPos = selectRange.text.length;

     } else if (textDom.setSelectionRange) {

         // webkit support

         textDom.focus();

         cursorPos = textDom.selectionStart;

     }

     return cursorPos;

 }

 // 设置光标位置

 function setCaretPosition(textDom, pos) {

     if (textDom.setSelectionRange) {

         textDom.focus();

         textDom.setSelectionRange(pos, pos);

     } else if (textDom.createTextRange) {

         // IE Support

         var range = textDom.createTextRange();

         range.collapse(true);

         range.moveEnd('character', pos);

         range.moveStart('character', pos);

         range.select();

     }

 }

 /**

  * 账号输入时自动4位一空格

  */

 $(function () {

     var isDelete = false;

     $("input[data-type='acc']").on("keyup", function (e) {

         var elem = this;

         //加timeout是为了处理安卓部分机型系统键盘无法录入的问题如vivo

         setTimeout(function(){

             var str = elem.value;

             var currentPos = getCursortPosition(elem);

             var posAfterText = "";

             var posPreText = "";

             var isNextBlank = false;//后面的是否是空格

             var isPreBlank = false;

             var isLastPos = true;

             if (currentPos != str.length) {//不是最后一个

                 posAfterText = str.substr(currentPos, 1);

                 posPreText = str.substr(currentPos - 1, 1);

                 isNextBlank = /^\s+$/.test(posAfterText);

                 isPreBlank = /^\s+$/.test(posPreText);

                 isLastPos = false;

             }

             if(elem.value.length <= $(elem).attr("maxlength")){//最大长度控制

                 elem.value = elem.value.replace(/\s/g, '').replace(/(\w{4})(?=\w)/g, "$1 ");

             }

             if (isDelete) {

                 if (isPreBlank) {

                     setCaretPosition(elem, currentPos - 1);

                 } else {

                     setCaretPosition(elem, currentPos);

                 }

             } else {

                 if (!isLastPos) {

                     if (isNextBlank) {

                         setCaretPosition(elem, currentPos + 1);

                     } else {

                         setCaretPosition(elem, currentPos);

                     }

                 } else {

                     setCaretPosition(elem, elem.value.length);

                 }

             }

         },0);

     });

     $("input[data-type='acc']").on("keydown", function (e) {

         //console.log("keyCode=" + window.event.keyCode);

         isDelete = window.event.keyCode == 8;//标记用户进行删除操作

     });

 })

移动web处理input输入框输入银行卡号四位一空格的相关教程结束。