php光标添加,两种实现光标点插入range

一、inse遇新是直朋能到分览支体调rtNode

Document

.edit {

width: 400px;

height: 140px;

border: 2px solid #ff7f50;

overflow: auto

}

const arr = ['😀', '😁', '😂', '😃', '😄', '😅', '😆', '😉', '😊', '😋', '😎']

let container = document.querySelector('.emoji-container')

let html = ``

for (let i = 0; i < arr.length; i++) {

html += `${arr[i]}`

}

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);

}

}

Document

.edit {

width: 400px;

height: 140px;

border: 2px solid #ff7f50;

overflow: auto

}

const arr = ['😀', '😁', '😂', '😃', '😄', '😅', '😆', '😉', '😊', '😋', '😎']

let container = document.querySelector('.emoji-container')

let html = ``

for (let i = 0; i < arr.length; i++) {

html += `${arr[i]}`

}

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)

}

}

以上案例来自于李同学新直能分支调二浏页器朋代说~

本文来源于网络：查看 >https://www.cnblogs.com/yiyi17/p/9619570.html