两种实现光标点插入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>
以上案例来自于李同学~
你要觉得这篇文章比较好,记得点推荐!