可编辑div获取焦点位置和选择区域的文本

时间：2022-11-17 21:36:42

一般来说文本输入框是可以用input（单行）和textarea（多行）的，但是，如果想在文本中间插入图片之类的非文本节点，或者文本设置不同的样式，这时候两个就不行了。可以用可编辑的div来实现。

把一个div设置成可编辑的，只需要把添加属性：contenteditable="true"就可以了。比如：<div id="d1" contenteditable="true">asdfasdf</div>

这时候div就像文本框一样可以输入文本内容了，和文本框不同的是，div的结构会随着输入的内容变化的，按enter键换行其实在可编辑的div里新加了div元素，文本内容放在span元素里。

如果想插入图片或者设定某断字符串的字号等样式，就需要知道焦点的位置或者是选择文本的位置。

对于不同的浏览器，大致有两个解决的方法：

一种是根据document.selection属性，适合IE10以及IE10以下的ie浏览器。

一种是根据window.getSelection()方法，适合webkit内核（chrome、UC等）、firefox浏览器以及IE11等。

1.IE10-

看下面的例子：

<script type="text/javascript">
//绑定文本焦点改变事件
document.onselectionchange = function (e) {
	//判断是否支持document.selection属性
	if (document.selection) {
		var pos = 0;
		var range = document.selection.createRange();
		var srcele = range.parentElement();
		//新建一个range，焦点在开头
		var copy = document.body.createTextRange();
		copy.moveToElementText(srcele);
		//判断copy的焦点起始部分是否在range的焦点起始部分的后面
		for (pos = 0; copy.compareEndPoints("StartToStart", range) < 0; pos++) {
			//copy的焦点向后移动一个字符
			copy.moveStart("character", 1);
		}
		document.getElementById('i1').value = pos;
		document.getElementById('i2').value = range.htmlText;
	}
}

</script>

焦点位置：<input id="i1">选中文本：<input id="i2">

<div id="d1" contenteditable="true" style="width:200px;height:100px;border:1px solid black">1234567890abcdef
</div>
Range对象里记录了选中的文本和起始焦点的位置，只不过里面记录的是位置（坐标）信息，而我们想要知道的是光标在第几个字符后面闪烁，这样才好插入图片等节点。这里使用Range的compareEndPoints方法，新建一个Range，从前往后挨个字符的移动焦点，移动一次判断下是否移动到了原来Range的后面了。


2.chrome UC等

看下面的例子：

<script type="text/javascript">
//绑定文本焦点改变事件 注意：firefox不支持document.onselectionchange，可以换成别的事件来触发比如mouseup什么的
document.onselectionchange = function (e) {
	//判断是否支持document.selection属性
	if (window.getSelection) {
		//获取Selection对象
		var se = window.getSelection();
		//获取起始位置，这个是字符的序号位置，而不是坐标
		var start = se.anchorOffset;
		//获取结束位置
		var end = se.focusOffset;
		//获取起始的dom元素
		var startEl = se.anchorNode.parentElement;
		//获取结束的dom元素
		var endEl = se.focusNode.parentElement;
		//获取起始dom元素的文本内容
		var startText = startEl.innerText;
		var txt = '';
		if (startEl == endEl) {
			txt = startText.substring(start, end);
		}
		
		document.getElementById('i1').value = start;
		document.getElementById('i2').value = txt;
	}
}

</script>

起始位置：<input id="i1">选中文本：<input id="i2">

<div id="d1" contenteditable="true" style="width:200px;height:100px;border:1px solid black">1234567890abcdef
</div>
Selection对象看起来比ie10-用的Range对象要好用一些，相对来说也更好理解。里面记录了开始位置、结束位置、开始元素、结束元素等信息，选中的文本需要根据这些信息自己计算。需要注意的是，例子中判断了startEl == endEl，说明开始元素和结束元素可能是不同的元素的。这对应的情况就是，几个span挨在一起，从一个span的文本选到另一个span的文本，中间可能有好几个span，那这时候的开始位置和结束位置又是什么呢？试一下应该知道，开始位置是开始焦点在开始dom元素中的序号，结束位置是结束时候的焦点在结束dom元素中的序号。这时候就需要使用相邻兄弟元素的操作了。IE10中也涉及这个问题，不再赘述。


标签：

相关文章