js获取textarea或者input光标位置，控制光标位置

最新推荐文章于 2023-12-20 00:19:31 发布

斯诺登Snowden

最新推荐文章于 2023-12-20 00:19:31 发布

阅读量2.7k

点赞数

分类专栏： js

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <textarea name="text" rows="12" cols="28" id="select"></textarea>
    <!--<input type="text" name="select" id="select" />-->
    <label for="number">设置值</label>
    <input type="text" id="number" style="width: 28px;" />
    <button type="button" id="button0">ClickMe</button>
    <button type="button" id="button1">ClickMe2</button>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    /**
    * 获得光标位置兼容IE/FF
    * 
    例：
    var obj = document.getElementById("tx1");
    var pos = getCaretPosition(obj);
    alert("--"+pos);
    */
    function getCaretPosition(obj) {
        var result = 0;
        if(obj.selectionStart >= 0) { //IE以外 
            result = obj.selectionStart;
        } else { //IE 
            try {
                var rng;
                if(obj.tagName == "textarea") { //TEXTAREA 
                    rng = event.srcElement.createTextRange();
                    rng.moveToPoint(event.x, event.y);
                } else { //Text 
                    rng = document.selection.createRange();
                }
                rng.moveStart("character", -event.srcElement.value.length);
                result = rng.text.length;
            } catch(e) {
                throw new Error(10, "asdasdasd");
            }
        }
        return result;
    }
    var str = '1234567890';
    str = str.substring(0, str.length - 1);
    console.log(str)
    /**
    * 设置光标位置兼容IE/FF
    * @param tObj
    * @param sPos
    * 
    例：
     var obj =document.getElementById("tx1");  
       var sPos = obj.value.length-1;  
       setCaretPosition(obj, sPos);  
    */
    function setCaretPosition(tObj, sPos) {
        if(tObj && sPos) {
            if(tObj.setSelectionRange) {
                setTimeout(function() {
                    tObj.setSelectionRange(sPos, sPos);
                    tObj.focus();
                }, 0);
            } else if(tObj.createTextRange) {
                var rng = tObj.createTextRange();
                rng.move('character', sPos);
                rng.select();
            }
        }
    }

    $('#button0').click(function() {
        var input = document.getElementById('select');
        alert(getCaretPosition(input));
    });
    $('#button1').click(function() {
        var input = document.getElementById('select');
        var index = document.getElementById('number').value;
        setCaretPosition(input, index);
    })
</script>

斯诺登Snowden

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js获取textarea或者input光标位置，控制光标位置

<head> <meta charset="UTF-8"> <title></title></head><body> <textarea name="text" rows="12" cols="28" id="select"></textarea> 
复制链接

扫一扫

专栏目录