两种实现光标点插入range

Posted 2021-01-05 yiyi17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了两种实现光标点插入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">
    <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>

　　以上案例来自于李同学~

以上是关于两种实现光标点插入range的主要内容，如果未能解决你的问题，请参考以下文章

如何在文本区域标签中的特定光标位置插入选择标签下拉值作为文本片段？

代码片段如何使用CSS来快速定义多彩光标

如何改变vim中的光标形状 : 在插入状态下显示为 beam?而在其他状态下为 block?

js在光标处插入内容

contenteditable=“true“ ----＞window.getSelection() 获取光标位置 & 光标位置插入内容