两种实现光标点插入range

最新推荐文章于 2024-02-07 13:32:07 发布

辛苦的码农20200609

最新推荐文章于 2024-02-07 13:32:07 发布

阅读量350

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjbahiabai1j.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

一、insertNode

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .edit {
            width: 400px;
            height: 140px;
            border: 2px solid #ff7f50;
            overflow: auto
        }
    </style>
</head>

<body>
    <div class="emoji-container">

    </div>
    <div class="edit" contenteditable="true">

    </div>
    <script>
        const arr = ['😀', '😁', '😂', '😃', '😄', '😅', '😆', '😉', '😊', '😋', '😎']
        let container = document.querySelector('.emoji-container')
        let html = ``
        for (let i = 0; i < arr.length; i++) {
            html += `<span>${arr[i]}</span>`
        }
        let edit = document.querySelector('.edit')
        let range
        edit.onclick = function() {
            range = window.getSelection().getRangeAt(0)

        }
        edit.oninput = function() {
            range = window.getSelection().getRangeAt(0)
        }
        container.innerHTML = html
        let emojis = document.querySelectorAll('span')
        for (let i = 0; i < emojis.length; i++) {
            emojis[i].onclick = function() {
                let newNode = document.createElement('span')
                newNode.innerText = this.innerText
                range.insertNode(newNode)
                console.log(range);
            }
        }
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .edit {
            width: 400px;
            height: 140px;
            border: 2px solid #ff7f50;
            overflow: auto
        }
    </style>
</head>

<body>
    <div class="emoji-container">

    </div>
    <div class="edit" contenteditable="true">

    </div>
    <script>
        const arr = ['😀', '😁', '😂', '😃', '😄', '😅', '😆', '😉', '😊', '😋', '😎']
        let container = document.querySelector('.emoji-container')
        let html = ``
        for (let i = 0; i < arr.length; i++) {
            html += `<span>${arr[i]}</span>`
        }
        let edit = document.querySelector('.edit')
        let range
        edit.onclick = function() {
            range = window.getSelection().getRangeAt(0)

        }
        edit.oninput = function() {
            range = window.getSelection().getRangeAt(0)
            // editF(edit.innerHTML)
        }

        container.innerHTML = html
        let emojis = document.querySelectorAll('span')
        for (let i = 0; i < emojis.length; i++) {
            emojis[i].onclick = function() {
                let newNode = document.createElement('span')
                newNode.innerText = this.innerText
                range.collapse()
                range.insertNode(newNode)
            }
        }
    </script>
</body>

</html>

　　以上案例来自于李同学~

辛苦的码农20200609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两种实现光标点插入range

一、insertNode<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &
复制链接

扫一扫