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

灰太狼 2021-11-11 04:08 818阅读 0赞

最近遇到一个需求，用户在输入框里输入文本的时候，每输入一个字符都要转换成大写，

看起来比较简单，但是输入完后在中间插入删除的时候，

每添加或者删除一个字符的时候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

发表评论取消回复

表情：

评论列表（有 0 条评论，818人围观）

还没有评论，来说两句吧...

相关阅读

相关 input、textarea设置光标位置 | ele.setSelectionRange()

> 点击按钮触发textarea的focus时，默认光标的位置在最左边； > > 需求：focus时让光标的位置处于最右侧 -------------------- C

拼搏现实的明天。/ 2023年02月20日 02:58/ 0 赞/ 189 阅读

相关 input获取光标位置,插入emoji

在使用emoji表情的时候,需要在多个文字中间进行插入表情需要使用原生获取input框(因为使用组件会被包裹一层,使用ref无法直接获取) onSelectEm

╰+哭是因爲堅強的太久メ/ 2022年10月17日 04:18/ 0 赞/ 113 阅读

相关 editView光标的位置定位

mUserName = (EditText) findViewById(R.id.et\_username); //先获取焦点 mUserName.requestFocu

爱被打了一巴掌/ 2022年07月16日 05:49/ 0 赞/ 259 阅读

相关 ios input 光标

ios中嵌套h5页面， input使用readonly后，不起作用，或者光标仍然可见。用disable的话，就不能操作该input了 <input ty

本是古典何须时尚/ 2022年06月10日 23:50/ 0 赞/ 150 阅读

相关 JS-设置input光标位置

设置input光标位置： <!DOCTYPE html> <html> <head> <meta chars

àì夳堔傛蜴生んèń/ 2022年05月13日 01:52/ 0 赞/ 306 阅读

相关网页中光标在input中的定位

转自：http://zhujinguo.iteye.com/blog/765929 IE下的Range操作比Mozilla下强很多，这里只讨论IE下的操作。这里

青旅半醒/ 2022年04月14日 02:26/ 0 赞/ 718 阅读

相关 TextArea中定位光标位置

在项目中，遇到一个场景：希望能在TextArea中输入某条记录中的明细(明细较简单，没有附属信息，只用记录顺序和值即可，譬如用“+”号来作为明细分隔符：1+1.5+2+

朱雀/ 2021年12月15日 12:45/ 0 赞/ 288 阅读

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

最近遇到一个需求，用户在输入框里输入文本的时候，每输入一个字符都要转换成大写，看起来比较简单，但是输入完后在中间插入删除的时候，每添加或者删除一个字符的时候input框

灰太狼/ 2021年11月11日 04:08/ 0 赞/ 819 阅读

相关 js让光标定位在文本的最后位置

有时候用focus好像不管用，它定位跑到了文字的最前面。我们想把它放在最后面怎么办呢？ <div contenteditable="true" id="text

傷城~/ 2021年10月23日 08:19/ 0 赞/ 710 阅读

相关 js 动态设置input光标位置、选中

input节点.setSelectionRange(开始索引, 接收索引, 方向); 方向:"forward","backward"和"none" 3个可选值

超、凢脫俗/ 2021年07月24日 11:43/ 0 赞/ 853 阅读