JS获取鼠标光标位置并在光标位置添加内容

原创已于 2022-06-28 19:05:22 修改 · 4.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #react.js #react

于 2022-06-28 19:00:58 首次发布

react 专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何在React应用中获取鼠标光标位置，并实现点击按钮后在指定位置插入文本的功能。利用contenteditable属性、window.getSelection()和createRange()方法，结合React的状态管理和DOM操作，实现了编辑框的动态插入内容。文章详细讲解了每个关键步骤，并提供了完整的代码示例，包括HTML、CSS和JS部分。

目标需求

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

准备工具

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标签失焦的触发blurDiv
	blurDiv = () => {
		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获取真实的dom
		const 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 } = item
			const 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 = str
		document.body.appendChild(dom)
		const w = document.getElementById('textWidth').clientWidth
		document.body.removeChild(document.getElementById('textWidth'))
		return w
	}
	// 最后，我们插入完，获取id为contentTable里面的内容
	getContent = () => {
		 const contentWrap = document.getElementById("contentTable");
		 // contentWrap.childNodes（数组的格式）里面就是我们要的数据，我们处理一下就可以了
		 console.log(contentWrap.childNodes)
	}