使用JavaScript怎么將input框中的內(nèi)容自動轉(zhuǎn)化成半角大寫-創(chuàng)新互聯(lián)

這篇文章主要為大家詳細介紹了使用JavaScript怎么將input框中的內(nèi)容自動轉(zhuǎn)化成半角大寫，文中示例代碼介紹的非常詳細，具有一定的參考價值，發(fā)現(xiàn)的小伙伴們可以參考一下：

10年積累的網(wǎng)站設(shè)計、網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有安達免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

JavaScript是什么

JavaScript是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語言，最早是在HTML網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。

首先查了全半角的區(qū)別以及如何轉(zhuǎn)化。

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]);
 // 除了數(shù)字英文之外的文本，包括中文等各國文字。
 }
}

這是兩者的區(qū)別，將文字轉(zhuǎn)成unicode之后，進行比較即可，兩者均有自己的范圍，半角為0x20~0x7E，全角為0xFF01~0xFF5E。（這是16進制，前面的0x是代表是16進制）

轉(zhuǎn)化的話除了空格不同之外，其他均為全角-半角=65248（0xFEE0）

具體的轉(zhuǎn)化函數(shù)如下：（這是網(wǎng)上的一種比較靠譜的方法，但是網(wǎng)上的方法普遍把SBC和DBC寫反了，我這里糾正了一下。）

// 轉(zhuǎn)全角字符
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;
}
// 轉(zhuǎn)半角字符
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;
}

全角半角的區(qū)別也找完了，開始想辦法轉(zhuǎn)化，用的是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);
 }
});

但是有一個問題，那就是光標有問題，始終在最后一位輸入的時候沒問題，但是在中間輸入，光標始終會跳到最后一位。于是又有了下面的光標相關(guān)知識。

在網(wǎng)上找到了下列相關(guān)代碼，用來控制光標位置。

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

這兩個分別是獲取光標位置以及設(shè)置光標位置。這里用到的是textRange對象。

TextRange對象是動態(tài)HTML(DHTML)的高級特性，使用它可以實現(xiàn)很多和文本有關(guān)的任務(wù)，例如搜索和選擇文本。文本范圍讓您可以選擇性的將字符、單詞和句子從文檔中挑選出來。TextRange對象是在HTML文檔將要顯示的文本流上建立開始和結(jié)束位置的抽象對象。

下面是TextRange的常用屬性與方法：

屬性：

boundingHeight   獲取綁定TextRange對象的矩形的高度

boundingLeft       獲取綁定TextRange 對象的矩形左邊緣和包含TextRange對象的左側(cè)之間的距離

offsetLeft            獲取對象相對于版面或由offsetParent屬性指定的父坐標的計算左側(cè)位置

offsetTop            獲取對象相對于版面或由offsetParent屬性指定的父坐標的計算頂端位置

htmlText            獲取綁定TextRange對象的矩形的寬度

text                   設(shè)置或獲取范圍內(nèi)包含的文本

方法：

moveStart          更改范圍的開始位置

moveEnd            更改范圍的結(jié)束位置

collapse             將插入點移動到當前范圍的開始或結(jié)尾

move                折疊給定文本范圍并將空范圍移動給定單元數(shù)

execCommand   在當前文檔、當前選中區(qū)或給定范圍上執(zhí)行命令

select                將當前選擇區(qū)置為當前對象

findText             在文本中搜索文本并將范圍的開始和結(jié)束點設(shè)置為包圍搜索字符串。

具體使用可見其他人的文章，地址是：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);
 }
});

上述代碼中我自己寫的就是最下面的綁定事件，仔細看一下應(yīng)該都是可以看懂的。但是上述代碼有一個bug，其實也算是getCursortPosition這個方法的bug。

那就是在中文輸入法的時候，輸入的字母在input事件執(zhí)行的時候是選中格式，光標在該字母之前，以至于位置跟想象的有偏差，在正確的時候打出來的字一直在光標之后。

當時我很苦惱感覺人生無望啊。。想了幾種方法：

1. 默認觸發(fā)鍵盤左箭頭再觸發(fā)右箭頭。這樣不管是不是選中光標都應(yīng)該是正確的位置了。

2. 查看當前頁面中是否有選中的文字。如果有選中的文字，就把返回的光標位置+1。

網(wǎng)上查了一下第一種方法，立馬就放棄了。相關(guān)資料也很少，而且局限性相當大，瀏覽器之間差異也大，怎么看都不像是會是一種好方法。

然后找到了第二種方法的方法。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);
 }
});

以上就是創(chuàng)新互聯(lián)建站小編為大家收集整理的使用JavaScript怎么將input框中的內(nèi)容自動轉(zhuǎn)化成半角大寫，如何覺得創(chuàng)新互聯(lián)建站網(wǎng)站的內(nèi)容還不錯，歡迎將創(chuàng)新互聯(lián)建站網(wǎng)站推薦給身邊好友。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、建站服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當前標題：使用JavaScript怎么將input框中的內(nèi)容自動轉(zhuǎn)化成半角大寫-創(chuàng)新互聯(lián)
本文地址：http://m.jiaotiyi.com/article/ecghe.html