设置光标位置demo

最新推荐文章于 2023-11-16 15:58:21 发布

小白变怪兽

最新推荐文章于 2023-11-16 15:58:21 发布

阅读量813

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/u013558749/article/details/103637797

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>#edit{height:500px;width:300px;border:1px solid red;}</style>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div id="edit" class="test" contenteditable>
        <p>这里就是我需要变动的位置了</p>
    </div>
    <button id="positionCursor">点击定位光标</button>
    <script>
        document.getElementById('edit').focus();
        var positionCursor = document.getElementById('positionCursor');
        function positionCaret(textNode, position) {
            if (textNode.setSelectionRange) {
                textNode.setSelectionRange(position, position);
            } else if (textNode.createTextRange) {
                var range = textNode.createTextRange()
                range.moveStart("character", -textLength)
                range.moveEnd("character", -textLength)
                range.moveStart("character", position)
                range.moveEnd("character", 0)
                range.select();
            } else {
                var newRange = document.createRange();
                newRange.setStart(textNode, position);
                newRange.collapse(true);
    
                var selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(newRange);
            }
        }
        positionCursor.addEventListener('click', function() {
            let p = document.getElementById('edit').getElementsByTagName('p')[0].childNodes[0];
            // 这里只是要写一个demo， 所以直接将光标要落的位置设置为2
            positionCaret(p, 2);
        })
    </script>
</body>
</html>

小白变怪兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设置光标位置demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style>#edit{height:500px;width:300px;border:1px solid red;}</st...
复制链接

扫一扫