document.selection

最新推荐文章于 2016-10-19 00:34:44 发布

lnn2007

最新推荐文章于 2016-10-19 00:34:44 发布

阅读量475

点赞数

文章标签： div button html

本文介绍了一种利用Web技术解决富文本编辑器中Enter键导致文本越界的解决方案，包括使用document.selection.createRange进行文本定位与操作，以及在点击按钮时获取编辑区域内的文本内容。此方法适用于微博分享等应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div contentEditable id=div onkeydown="edit(this.innerHTML)">edit</div>
<div id=r ></div>
<input type="button" value="查看代码" onclick="alert(document.getElementById('div').innerHTML)">
<SCRIPT>
function edit(html)
{	
     if(event.keyCode==13){
     	var textRange=document.selection.createRange();//寻找高亮显示的地区
	   
      	textRange.text="\r\n";   //这个是window里面的回车表示
      	textRange.select();   //再选中本地区
      	event.returnValue=false;
    }
}

</SCRIPT>

document.selection.createRange好像是创建Range对象的其中一种方法，有些记不清了。但是这个是web富文本编辑的基础，也是很核心的一部分。

本段js主要解决对于可编辑div下enter键“越界”的问题。通过selection可以实现类似于新浪微博分享的功能。前一阵做了一个类似微博分享功能的网页纠错方法，感觉web的富文本应用真得很有意思，所以才学些了ueditor，加油！

过几天把纠错的js加上，现在还没有整理好