2017年2月27日手记

根据在现在公司的规定，要每天写手记（就是要写今天干了什么），我觉得这样听好的，五日三省吾身。每天回顾一下自己今天的工作和学习还是挺好的，希望能坚持，好进入正题。今天的开发是模仿ATM机上面界面做一套类似的界面出来。一开始觉得没什么，很快就完成了所有的界面（因为界面都类似，只要建好模板接下来的工作就很轻松了）。

不过在我写卡号输入框的时候遇到了个问题，因为考虑到客户体验的问题所以必须在用户输入时对用户的卡号进行分隔---每格四个数字中间加个空格，但是考虑到时再电脑上操作，与ATM机上不同的是由于有鼠标和键盘上的方向键所以会改变输入框中的插入符，因此我用了Jquery中的输入框数据改变监听事件，利用JavaSript的this.selectionStart获取插入符的位置然后接下就是用正则表达式对字符串进行操作，好了不BB了直接上代码（下面的代码是我从网上找到的，为了实现上面提到的问题我在找到的代码的基础上加了点自己的东西）：

$('#inputCardNumber').bind('input propertychange', function (e) {//bind()这个方法好像兼容性不怎么好记得在蚂蚁部落上看到一个文章好像是说这个函数基本被放弃了因为有on()

                //获取光标的位置
                var caret = this.selectionStart
                //获取输入框中的值
                var value = this.value;
                //获取输入框中的空格数
                var sp = (value.slice(0, value.length).match(/\s/g) || []).length
                //将输入框中的空格消除
                var nospace = value.replace(/\s/g, '')
                //重新添加空格
                var curVal = this.value = nospace.replace(/(\d{4})/g, "$1 ").trim()
                //输入框中的空格数
                var curSp = (curVal.slice(0, value.length).match(/\s/g) || []).length
                //修正光标的位置
                if (caret == value.length) {
                    this.selectionEnd = this.selectionStart = value.length + curSp + 1
                } else {
                    this.selectionEnd = this.selectionStart = caret + curSp - sp
                }
            });

后来发现在IE8上这个selectionStart好像是无效的，后来查了下资料是说不兼容所以我有去百度了，发现百度真是个好东西，我又找到了可以在IE中运行的方法，献上代码，（此刻让我想起了前人栽树后人乘凉，谢谢大牛们的无私奉献）：

        //获取插入符的位置
        function getPos(obj) {
            obj.focus();
            var s = document.selection.createRange();
            s.setEndPoint("StartToStart", obj.createTextRange())
            return s.text.length;
        }
        function 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();                      // 选定当前区域  
            }
        }    

后来经理说完全模拟ATM机，没有鼠标，没有方向键，插入符永远在最右边（心里有一万只草泥马在奔腾），好了 ，接下来我献上完全原创代码，实现的效果有（插入符一直在输入框的最右边，不论是用鼠标点击还是方向键的改变，插入符会都会变道输入框的最右边，对输入的数据进行了判断并要求只能是数字）：

$('#inputCardNumber').on('keyup', function () {
            //获取输入框中的值
            var value = this.value;
            //获取输入框中的空格数
            var sp = (value.slice(0, value.length).match(/\s/g) || []).length
            //将输入框中的空格消除
            var nospace = value.replace(/\s/g, '')
            if (/\D/.test(nospace)) {
                alert('只能输入数字');
                this.value = '';
            } else {
                //重新添加空格
                var curVal = this.value = nospace.replace(/(\d{4})/g, "$1 ").trim()
                //输入框中的空格数
                var curSp = (curVal.slice(0, value.length).match(/\s/g) || []).length
                //修正光标的位置
                this.selectionEnd = this.selectionStart = value.length + curSp + 1
            }
        })
        $('#inputCardNumber').on('click', function () {
            setCaretPosition(this,this.value.length)
        });

function 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();                      // 选定当前区域  
    }
}

好了，今天的分享到这里，接下来的计划是每天写一篇，并努力搞懂当一个IE版本不支持一个方法时，其实是可以自己重写（已经具体名称是什么，所有用了重写这个词，希望高手看到后可以纠正，谢谢）这个方法来实现方法的调用，希望能弄懂这么方法，完全掌握，待我完全掌握后我会分享出来！