可编辑div获取焦点位置和选择区域的文本
2015-03-30 10:32
176 查看
一般来说文本输入框是可以用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-
看下面的例子:
2.chrome UC等
看下面的例子:
把一个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中也涉及这个问题,不再赘述。
相关文章推荐
- javascript获取textarea中所选文本的开始位置、结束位置和选择的文本
- Android开发中EditText设置/隐藏光标位置、选中文本和获取/清除焦点
- EditText设置/隐藏光标位置、选中文本和获取/清除焦点
- js获取可编辑区域光标位置
- EditText设置/隐藏光标位置、选中文本和获取/清除焦点
- .Net C# WinForm -- 获取TextBox当前焦点所在位置,插入文本,选中文本
- JS获取及设置TextArea或input文本框选择文本位置的方法
- Android--Android教程]EditText设置/隐藏光标位置、选中文本和获取/清除焦点
- .Net C# WinForm -- 获取TextBox当前焦点所在位置,插入文本,选中文本
- ahjesus 获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome
- 如何让div获取焦点或可编辑
- js按ctrl+enter换行,让可编辑的div换行,并获取输入焦点光标
- Android - 小功能 - EditText设置/隐藏光标位置、选中文本和获取/清除焦点
- [Android教程]EditText设置/隐藏光标位置、选中文本和获取/清除焦点
- [Android教程]EditText设置/隐藏光标位置、选中文本和获取/清除焦点
- EditText设置/隐藏光标位置、选中文本和获取/清除焦点
- React可编辑DIV获取焦点的两种方式
- EditText设置/隐藏光标位置、选中文本和获取/清除焦点
- [Android教程]EditText设置/隐藏光标位置、选中文本和获取/清除焦点
- gridView 编辑单元格获取单元格焦点位置(位于单元格的焦点位置)