定位input的光标，设置光标的位置
最近遇到一个需求，用户在输入框里输入文本的时候，每输入一个字符都要转换成大写，
看起来比较简单，但是输入完后在中间插入删除的时候，
每添加或者删除一个字符的时候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>
