js 将input框中的输入自动转化成半角大写(税号输入框)


Posted in Javascript onFebruary 16, 2017

这两天出了这么一个需求,输入税号的时候,需要自动将其转化为半角大写,并且阻止标点符号中文汉字的输入。(下面会有:全半角转换、文本框选中、光标位置判断、设置光标位置 这些内容)

然后我就开始了慢慢查找资料之路。

首先查了全半角的区别以及如何转化。

var str = "中文;;a";
for (var i = 0; i < str.length; i++) {
 if (str[i].match(/[\u0000-\u00ff]/)) {
 console.log("半角字符");
 } else if (str[i].match(/[\uff00-\uffff]/)) {
 console.log("全角字符 " + str[i] + " " + toSBC(str[i]));
 } else {
 console.log(str[i]);
 // 除了数字英文之外的文本,包括中文等各国文字。
 }
}

这是两者的区别,将文字转成unicode之后,进行比较即可,两者均有自己的范围,半角为0x20~0x7E,全角为0xFF01~0xFF5E。(这是16进制,前面的0x是代表是16进制)

转化的话除了空格不同之外,其他均为全角-半角=65248(0xFEE0)

具体的转化函数如下:(这是网上的一种比较靠谱的方法,但是网上的方法普遍把SBC和DBC写反了,我这里纠正了一下。)

// 转全角字符
function toSBC(str) {
 var result = "";
 var len = str.length;
 for (var i = 0; i < len; i++) {
 var cCode = str.charCodeAt(i);
 //全角与半角相差(除空格外):65248(十进制)
 cCode = (cCode>=0x0021 && cCode<=0x007E)?(cCode + 65248) : cCode;
 //处理空格
 cCode = (cCode==0x0020)?0x03000:cCode;
 result += String.fromCharCode(cCode);
 }
 return result;
}
// 转半角字符
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;
}

全角半角的区别也找完了,开始想办法转化,用的是input方法。

var oldValue = "";
var $thisDom; // 假装有jquery的dom元素
$thisDom.unbind().bind("input", function (e) {
 var reg = /^[0-9A-Za-z]*$/;
 var str = toDBC(e.target.value).toUpperCase();
 if (reg.test(str)) {
 oldValue = str;
 $(this).val(str);
 } else {
 $(this).val(oldValue);
 }
});

但是有一个问题,那就是光标有问题,始终在最后一位输入的时候没问题,但是在中间输入,光标始终会跳到最后一位。于是又有了下面的光标相关知识。

在网上找到了下列相关代码,用来控制光标位置。

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();
 }
}

这两个分别是获取光标位置以及设置光标位置。这里用到的是textRange对象。

TextRange对象是动态HTML(DHTML)的高级特性,使用它可以实现很多和文本有关的任务,例如搜索和选择文本。文本范围让您可以选择性的将字符、单词和句子从文档中挑选出来。TextRange对象是在HTML文档将要显示的文本流上建立开始和结束位置的抽象对象。

下面是TextRange的常用属性与方法:

属性:

boundingHeight   获取绑定TextRange对象的矩形的高度

boundingLeft       获取绑定TextRange 对象的矩形左边缘和包含TextRange对象的左侧之间的距离

offsetLeft            获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置

offsetTop            获取对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置

htmlText            获取绑定TextRange对象的矩形的宽度

text                   设置或获取范围内包含的文本

方法:

moveStart          更改范围的开始位置

moveEnd            更改范围的结束位置

collapse             将插入点移动到当前范围的开始或结尾

move                折叠给定文本范围并将空范围移动给定单元数

execCommand   在当前文档、当前选中区或给定范围上执行命令

select                将当前选择区置为当前对象

findText             在文本中搜索文本并将范围的开始和结束点设置为包围搜索字符串。

具体使用可见其他人的文章,地址是:https://3water.com/article/105787.htm

回到正题,于是我把上述代码拼进了我的代码中。

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);
 }
});

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
node.js实现端口转发
Apr 14 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
微信小程序实现日历签到
Sep 21 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 #Javascript
js实现3d悬浮效果
Feb 16 #Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 #Javascript
js实现截图保存图片功能的代码示例
Feb 16 #Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 #Javascript
原生JS实现图片翻书效果
Feb 16 #Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 #Javascript
You might like
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
JS中Location使用详解
2015/05/12 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
Python处理字符串之isspace()方法的使用
2015/05/19 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
Python 私有函数的实例详解
2017/09/11 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
python和go语言的区别是什么
2020/07/20 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
学生就业推荐信
2013/11/13 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
安全守法证明
2015/06/23 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
MySQL 开窗函数
2022/02/15 MySQL