重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
使用JavaScript怎么将input框中的内容自动转化成半角大写
这篇文章主要为大家详细介绍了使用JavaScript怎么将input框中的内容自动转化成半角大写，文中示例代码介绍的非常详细，具有一定的参考价值，发现的小伙伴们可以参考一下：
成都创新互联公司主营桑珠孜网站建设的网络公司,主营网站建设方案,APP应用开发,桑珠孜h5微信小程序开发搭建,桑珠孜网站营销推广欢迎桑珠孜等地区企业咨询
JavaScript是什么
JavaScript是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，JavaScript是被广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
首先查了全半角的区别以及如何转化。
var str = "中文;；ａ";
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://www.jb51.net/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怎么将input框中的内容自动转化成半角大写，如何觉得创新互联网站的内容还不错，欢迎将创新互联网站推荐给身边好友。
名称栏目：使用JavaScript怎么将input框中的内容自动转化成半角大写
文章链接：http://cqcxhl.com/article/pijjsh.html