定位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>

转自https://www.cnblogs.com/pengqiangGGG/p/10873815.html

定位input的光标，设置光标的位置相关推荐

怎样隐藏光标—设置光标
一.隐藏光标 1.引入头文件window.h 2. 定义光标信息结构体变量 CONSOLE_CURSOR_INFO cursor info={1,0}; typedef struct _CONSO ...
input、textarea设置光标位置 | ele.setSelectionRange()
点击按钮触发textarea的focus时,默认光标的位置在最左边: 需求:focus时让光标的位置处于最右侧 Code // HTML <button onclick="setPos ...
android input鼠标坐标,android - 如何在EditText中设置光标位置？
android - 如何在EditText中设置光标位置? 有两个EditText,在加载页面时,第一个EditText中设置了一个文本,所以现在光标将在EditText的起始位置,我想在第二个Edi ...
linux设置光标位置,linux下光标定位和输出颜色设置
printf("\033[47;31mhello world\033[5m"); 47是字背景颜色, 31是字体的颜色, hello world是字符串. 后面的\033[5m是 ...
获取/设置input中的鼠标光标位置
在我们实现字符分隔时,在一定的程度上增加了用户体验.但是使用replace时,不能控制光标的位置.如何设置呢? 步骤: 1.获取光标位置:var pos = this.selectionEnd;//获 ...
HTML+CSS---定位（相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度（opacity属性定义元素的不透明度--IE的半透明滤镜）---外边线
文章目录定位静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序表单设置光标样式透明度 opacity属性定义元素 ...
[图解]在输入框和文本框中获取和设置光标位置，以及选中文本和获取选中文本值的方法 --- 详解，兼容所有浏览器。...
为什么80%的码农都做不了架构师?>>> 写在前面最近在segmentfault上看到它的日期输入控件,感觉挺有意思.好吧,动手写一个,加到自己的代码库里吧. 然后问题来了, ...
获取光标位置及动态设置光标到指定位置
问题场景:页面有一个字段框(可以理解为一个div中有很多label),一个input框,进入页面,input框自动获取焦点,点击每一个label会把label的内容进行处理,比如加个括号()表示是个函 ...
js获取光标，设置光标位置
直接贴代码,作为日常开发笔记 /* 设置光标位置* @params {Object} ele 输入框元素* @params {Number} pos 需要将光标设置的位置* @author *** 2 ...

定位input的光标，设置光标的位置

定位input的光标，设置光标的位置相关推荐

最新文章

热门文章