最近遇到一個需求，用戶在輸入框里輸入文本的時候，每輸入一個字符都要轉換成大寫，
看起來比較簡單，但是輸入完后在中間插入刪除的時候，
每添加或者刪除一個字符的時候input框的光標自動跑到字符最后面，操作起來很是麻煩
下面在網上找的各種資料，整理的一些方法，經過一些嘗試終於解決了，記錄下來，此方法依賴於jquery。
注釋掉的部分 可以自行刪除。以下是demo
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<input type="text" id="demo">
<script>
$("#demo").on("keyup", function(e) {
if(e.keyCode==37||e.keyCode==39){
return;
}
var $this = $(this);
var val = $this.val();
console.log($(this).getCursorPosition())
var i = $(this).getCursorPosition()
$this.val(val.toUpperCase());
setCaretPosition($(this)[0],i)
})
</script>
<script language="JavaScript">
//獲取光標位置
(function ($, undefined) {
$.fn.getCursorPosition = function () {
var el = $(this).get(0);
var pos = 0;
if ('selectionStart' in el) {
pos = el.selectionStart;
} else if ('selection' in document) {
el.focus();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -el.value.length);
pos = Sel.text.length - SelLength;
}
return pos;
}
})(jQuery);
//獲取光標位置
// (function($){
// $.fn.extend({
// // 獲取當前光標位置的方法
// getCurPos:function() {
// var getCurPos = '';
// if ( navigator.userAgent.indexOf("MSIE") > -1 ) { // IE
// // 創建一個textRange,並讓textRange范圍包含元素里所有內容
// var all_range = document.body.createTextRange();all_range.moveToElementText($(this).get(0));$(this).focus();
// // 獲取當前的textRange,如果當前的textRange是一個具體位置而不是范圍,則此時textRange的范圍是start到end.此時start等於end
// var cur_range = document.selection.createRange();
// // 將當前textRange的start,移動到之前創建的textRange的start處,這時,當前textRange范圍就變成了從整個內容的start處,到當前范圍end處
// cur_range.setEndPoint("StartToStart",all_range);
// // 此時當前textRange的Start到End的長度,就是光標的位置
// curCurPos = cur_range.text.length;
// } else {
// // 獲取當前元素光標位置
// curCurPos = $(this).get(0).selectionStart;
// }
// // 返回光標位置
// return curCurPos;
// }
// });
// })(jQuery);
/*
定位光標
*/
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();
}
}
// $(document).on("input",".mustArriveTimes",function(){
// if(event.shiftKey||event.altKey||event.ctrlKey||event.keyCode==16||event.keyCode==17||event.keyCode==18||(event.shiftKey&&event.keyCode==36))
// return;
// var pos=$(this).getCurPos();//保存原始光標位置
// var temp = $(this).val();
// $(this).val($(this).val().replace(/[^-+\d]/g,''));
// if($(this).val().length > 0){
// var afterstr = $(this).val().substr(pos-(temp.length-$(this).val().length),$(this).val().length);
// var beforestr = $(this).val().substr(0,pos-1);
// $(this).val(beforestr + afterstr);
// }
// pos=pos-(temp.length-$(this).val().length);//當前光標位置
// setCaretPosition($(this)[0],pos);//設置光標
// /*if($(this).val().length == 2){
// $(this).val($(this).val()+':');
// }else if($(this).val().length > 7){ */
// //}
// });
</script>
</body>
</html>