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 相关文章推荐
javascript 兼容鼠标滚轮事件
Apr 07 Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
详解JavaScript常量定义
Jan 03 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 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读取数据库信息的几种方法
2008/05/24 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
js二级地域选择的实现方法
2013/06/17 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
Python基类函数的重载与调用实例分析
2015/01/12 Python
详解重置Django migration的常见方式
2019/02/15 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
python学生信息管理系统实现代码
2019/12/17 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
python利用opencv保存、播放视频
2020/11/02 Python
硕士研究生自我鉴定
2013/11/08 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
整改落实自查报告
2014/11/05 职场文书
会计工作总结范文2014
2014/12/23 职场文书
支教个人总结
2015/03/04 职场文书
调解协议书范本
2016/03/21 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python