可编辑div光标位置

参考：

https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt

https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange

MDN上提示这些API不稳定。应该是兼容IE9+，谷歌，火狐

1. var sel = window.getSelection() 变量sel是当前页面被选中区域

2. var objRange = sel.getRangeAt(0) 获得选中区域的range对象

startOffset和endOffset代表了选中区域的起始位置和结束位置，相同时代表了光标位置

anchorNode有2个值，一个是输入框节点，一个是文本text。

anchorNode为输入框节点时，startOffset代表了在文本框中的位置，一段文字看成一个整体相当于只占一个位置，一个表情算一个位置。

3. objRange.rangeCount表示选中区域的range对象数量
4. sel.removeAllRanges()可以移除选中区域的range对象

5. document.createRange()可以创建新的range对象

6. sel.addRange(range)可以给选中区域添加range对象

基本思路：

当可编辑div失去焦点时，要记录当时的range对象，赋值给一个变量lastRange

当可编辑div重新获得焦点，会有一个默认range对象，startOffset和endOffset都为0

使用sel.removeAllRanges()可以移除选中区域的range对象

使用sel.addRange(lastRange)可以给选中区域添加当时保存的lastRange对象

别人家的详细解释和示例：https://segmentfault.com/a/1190000005869372

原文地址：https://www.cnblogs.com/BluceLee/p/12100026.html

时间： 2024-10-10 02:37:50

可编辑div光标位置的相关文章

可编辑DIV 光标位置处理

//场景: 要做一个网页即时通信,发送信息的文本编辑框要求能发图片和表情,那么textarea就不能满足需求了,因为textarea内没有办法加入image // 采用方案是使用可编辑的DIV(也就是一般 DIV的 contenteditable 属性为 true) // 但是发现添加表情或者插入图片之后,光标不会随着移动到末尾图片和表情采用的 append方式添加的html结构采用以下方法可以在输入图片和表情之后使光标出现在最后 IE11 和 chrome浏览器完全没问题 ob

获取可编辑div光标位置

原文:http://www.jb51.net/article/57650.htm <html> <body> <button type="button" onclick="document.getElementById('test').focus(); insertHtmlAtCaret('<b>INSERTED</b>');">插入字符</button> <div contentEdit

js获取可编辑区域光标位置

请到简书中看,地址: http://www.jianshu.com/p/19a507cd5fd7 github测试例子 https://github.com/Stevenzwzhai/plugs/tree/master/selection-%E5%8F%AF%E7%BC%96%E8%BE%91%E5%8C%BA%E5%85%89%E6%A0%87%E4%BD%8D%E7%BD%AE

可编辑div 获取光标位置及插入内容

<!DOCTYPE html> <html> <title>Div 光标位置插入文字或 HTML</title> <script language="javascript" type="text/javascript"> var range; function getPos() { range = window.getSelection().getRangeAt(0);//找到焦点位置 var spa

可编辑div将光标定位到最后

最近做了一个可以回复留言的页面,主要包括:@.表情功能,一开始使用的是文本域textarea,最后发现这样无法显示表情,后来改成可编辑div,在div中添加contenteditable="true",则该div即可编辑. <div contenteditable="true"></div> 在选择表情或者选择@某人后,会经常遇到选择后可编辑div中的光标不见了,或者显示的位置不对,于是在网上找了些方法,现在总结下: function set

可编辑DIV （contenteditable="true"）在鼠标光标处插入图片或者文字

近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情出来了,当编辑框失去焦点时候,再插入图片时候总是插入在最前面(谷歌和火狐,IE没问题).还没搞定,,, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

js之向div contenteditable光标位置添加字符

原理: 在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的. 当我们去点击一个输入框的时候,实际上它会产生一个选中对象-selection(就是我们可以看到的文字变成蓝色的那个区域),selection在火狐浏览器可以直接用 window.getSelection()获取,在HTML里面,selection只有一个的,并且selection是一个区域,你可以想象成一个长方形,它是有开始和结束的当你点击一个输入框,或者你切换到别的输入框,selection是会跟着变化

js在一个可编辑的div光标处插入图片或者文本（兼容ie，火狐等浏览器）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

模拟可编辑div输入域同时输入文字表情

近期遇到了模拟可编辑div输入域同时输入文字表情的需求,本来还觉得很好做,但是在具体实施的过程中遇到了一点问题. 第一个比较简单的问题是表情和对应字符的映射关系,这部分比较好做,没有用富文本框也没有用编辑器,做了表情和相应字符的对应关系只有就可以实现这个需求. 第二个问题在解决过程中就比较棘手了,因为是自己模拟输入域,所以对于在文字中加入表情后光标的定位及后续的输入是有要求的,就是得符合正常的输入习惯.这个问题的核心就是对于node节点的操作和光标对象的熟悉程度及其内部属性和方法的使用.对于前端