js获取鼠标光标位置并在光标位置添加内容 -凯发k8官方网

目标需求

• 获取鼠标光标位置，然后点击按钮或其他事件，在鼠标光标的位置插入需要的文字等

准备工具

• contenteditable：contenteditable属性指定元素内容是否可编辑。
• window.getselection()： 获取鼠标光标位置
• window.getselection().getrangeat(params)：getrangeat把鼠标光标在的位置分成前后两端，getrangeat得到的是一个数组，params通常是数组的下表，我们这里写0
• createrange()：返回新创建的range对象，可以用来表示文档的一个区域或与该文档相关的 documentfragment 对象。

html

react写法

<div id="contenttable" classname={styles['infobox']} placeholder='请输入内容' contenteditable suppresscontenteditablewarning onblur={this.blurdiv} />

注意⚠️

• 当不写suppresscontenteditablewarning这个属性的时候，有可能会抛出警告：warning: a component is contenteditable and contains children managed by react.

css

如果我们想给我div加一个placeholder的话，如下：

.infobox {width: 100%;height: 115px;padding: 16px;line-height: 1;outline: none;&:empty::before {content: attr(placeholder);color: #808080;}}

js

// 光标从id为content的div标签失焦的触发blurdivblurdiv = () => {const positionobj = window.getselection().getrangeat(0)// setstate是react自带的api，这里把positionobj存起来，其他方法用的到this.setstate({ positionobj })}// 插入动作modalok = () => {const { item } = this.state// item为要插入的相关信息this.insertfun(item)}// 插入某个位置insertfun = item => {const { positionobj } = this.state// contentwrap是拿到上面👆div的dom，react如果拿不到真实dom的话，可以用ref或者useref获取真实的domconst contentwrap = document.getelementbyid('contenttable')const range = document.createrange()if (contentwrap.childnodes.length == 0) {contentwrap.appendchild(this.handlecreatecontent(item))} else {// 这里判断positionobj是否为undefined，是因为第一添加的时候是undefined，第一次添加的时候直接insertnode到id为contenttable这个父节点if (positionobj == undefined) {range.setstart(contentwrap.childnodes[0], 0)range.setend(contentwrap.childnodes[0], 0)range.insertnode(this.handlecreatecontent(item))return}range.setstart(positionobj.startcontainer, positionobj.startoffset)range.setend(positionobj.startcontainer, positionobj.startoffset)range.insertnode(this.handlecreatecontent(item))}}// 处理要插入什么内容handlecreatecontent = item => {const { dropmenutype, name, pagepath } = itemconst width = this.gettextwidth(`{${name}}`)const input = document.createelement('input')input.setattribute('class', 'input')input.setattribute('value', `{${name}}`)input.setattribute('disabled', false)input.style.width = `${width 5}px`input.style.border = 'none'return input}// 获取文字的宽度，因为input的宽度不能用width:fit-content自适应，并且这里用input标签的原因是因为想把要插入的内容当作一个整体（光标选不中input里面的内容，只能选input的前后）gettextwidth = str => {let dom = document.createelement('span')dom.setattribute('id', 'textwidth')dom.style.display = 'inline-block'dom.textcontent = strdocument.body.appendchild(dom)const w = document.getelementbyid('textwidth').clientwidthdocument.body.removechild(document.getelementbyid('textwidth'))return w}// 最后，我们插入完，获取id为contenttable里面的内容getcontent = () => {const contentwrap = document.getelementbyid("contenttable");// contentwrap.childnodes（数组的格式）里面就是我们要的数据，我们处理一下就可以了console.log(contentwrap.childnodes)}

总结

以上是凯发k8官方网为你收集整理的js获取鼠标光标位置并在光标位置添加内容的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。