function toDBC(str) { var result = ""; var len = str.length; for (var i = 0; i < len; i++) { var cCode = str.charCodeAt(i); //全角与半角相差（除空格外）：65248（十进制） cCode = (cCode>=0xFF01 && cCode<=0xFF5E)?(cCode - 65248) : cCode; //处理空格 cCode = (cCode==0x03000)?0x0020:cCode; result += String.fromCharCode(cCode); } return result; } function getCursortPosition(ctrl){ var CaretPos = 0; if (document.selection) { ctrl.focus(); var Sel = document.selection.createRange(); Sel.moveStart('character', -ctrl.value.length); CaretPos = Sel.text.length; } else if (ctrl.selectionStart || ctrl.selectionStart == '0') { CaretPos = ctrl.selectionStart; } return (CaretPos); } 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(); } } var oldValue = this.model.get("taxNo"); $taxNoDom.unbind().bind("input", function (e) { var reg = /^[0-9A-Za-z]*$/; var position = getCursortPosition($taxNoDom[0]); var str = toDBC(e.target.value).toUpperCase(); if (reg.test(str) && str.length <= 25) { oldValue = str; $(this).val(str); setCaretPosition($taxNoDom[0], position); } else { $(this).val(oldValue); setCaretPosition($taxNoDom[0], position - 1); } });
上述代码中我自己写的就是最下面的绑定事件，仔细看一下应该都是可以看懂的。但是上述代码有一个bug，其实也算是getCursortPosition这个方法的bug。
那就是在中文输入法的时候，输入的字母在input事件执行的时候是选中格式，光标在该字母之前，以至于位置跟想象的有偏差，在正确的时候打出来的字一直在光标之后。
当时我很苦恼感觉人生无望啊。。想了几种方法：
1. 默认触发键盘左箭头再触发右箭头。这样不管是不是选中光标都应该是正确的位置了。
2. 查看当前页面中是否有选中的文字。如果有选中的文字，就把返回的光标位置+1。
网上查了一下第一种方法，立马就放弃了。相关资料也很少，而且局限性相当大，浏览器之间差异也大，怎么看都不像是会是一种好方法。
然后找到了第二种方法的方法。window.getSelection和document.selection
IE9以下支持：document.selection
IE9、Firefox、Safari、Chrome和Opera支持：window.getSelection()
（由于我们公司项目只支持ie9及以上，就没有尝试document.selection）
我自己试了一下，如果有选中的文字的时候window.getSelection().type === "Range"，如果没有选中window.getSelection().type === "Caret"。
于是最终的代码如下：
function toDBC(str) { var result = ""; var len = str.length; for (var i = 0; i < len; i++) { var cCode = str.charCodeAt(i); //全角与半角相差（除空格外）：65248（十进制） cCode = (cCode>=0xFF01 && cCode<=0xFF5E)?(cCode - 65248) : cCode; //处理空格 cCode = (cCode==0x03000)?0x0020:cCode; result += String.fromCharCode(cCode); } return result; } function getCursortPosition(ctrl){ var CaretPos = 0; if (document.selection) { ctrl.focus(); var Sel = document.selection.createRange(); Sel.moveStart('character', -ctrl.value.length); CaretPos = Sel.text.length; } else if (ctrl.selectionStart || ctrl.selectionStart == '0') { if (window.getSelection().type === "Range") { CaretPos = ctrl.selectionStart + 1; } else { CaretPos = ctrl.selectionStart; } } return (CaretPos); } 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(); } } var oldValue = this.model.get("commercialTax").taxNo; $taxNoDom.unbind().bind("input", function (e) { var reg = /^[0-9A-Za-z]*$/; var position = getCursortPosition($taxNoDom[0]); var str = toDBC(e.target.value).toUpperCase(); if (reg.test(str) && str.length <= 25) { oldValue = str; $(this).val(str); setCaretPosition($taxNoDom[0], position); } else { $(this).val(oldValue); setCaretPosition($taxNoDom[0], position - 1); } });