html input自动获取光标位置,HTML contenteditable 标签里怎样获取光标像素位置?
没人回答我.. 自己回答了..
操作 contenteditable 的区域应该当作 HTML 上选择高亮内容来处理了.
旧的 API 接触不多, 新的 API 主要是 Selection 跟 Range 两个 API,
Selection 对应的是界面上的选中内容, 而 Range 是 Selection 当中的一个选中的区域.
简单的理解是, 一个 Selection 里会有多个 Range, Range 包含起始位置结束位置等等,
起始未知需要知道在哪个节点, 偏移量是多少等等
当然还有根据 Selection 跟 Range 用上面的位置信息来操作的 API
具体操作的代码大概要结合 StackOverflow 上具体的用例来理解的了
简单的自己写一个比如, 选中点击位置...
jssel = getSelection()
document.onclick = function(event) {
event.preventDefault();
range = new Range;
range.selectNode(event.target);
sel.removeAllRanges();
sel.addRange(range)
}
这个两个 API 的兼容性有一些问题, 比如 new Range 会在 Safari 保存,
比如 range.baseNode 在 Firefox 下不存在..
为了减少兼容性造成的影响, 可以用 rangy 这个模块:
https://github.com/timdown/rangy/wiki
有点答跑题了.. 后面回到重点.. 答案在 MDN 关于这两个 API 的文档当中,
在 Range 的示例当中, 有试验的新 API 来提供对应的功能
Range.getBoundingClientRect()
Returns a ClientRect object which bounds the entire contents of the Range; this would be the union of all the rectangles returned by range.getClientRects().
Range.getClientRects()
Returns a list of ClientRect objects that aggregates the results of Element.getClientRects() for all the elements in the Range.
这两个 API 就可以返回选中的 range 的像素位置了
然后按照文档的提示, 对于元素还有 getClientRects 这个 API 可以用于获取标签的像素位置:
The Element.getClientRects() method returns a collection of rectangles that indicate the bounding rectangles for each box in a client.
写个脚本测试一下, 确实 OK:
jsdocument.onclick = function(event) {
event.preventDefault()
console.log(event.target.getClientRects()[0])
}
最近想到了一个新的方案, 因为获取选区是有 API 的, 我就模拟一个选区
就是说从光标开始往前或者往后选中一个字符, 然后获取选取的位置,
获取像素位置用到 getBoundingClientRect 这个 API, 完整代码如下:
https://gist.github.com/jiyinyiyong/f79c2bdf3fa646042173
不过有些细节还是没解决, 比如, 没有字怎么办? 选中一个字如果跨行了呢?
一般的情况, 我希望能够借助这个 API 完成.
html input自动获取光标位置,HTML contenteditable 标签里怎样获取光标像素位置?相关推荐
- Windows屏幕分辨率、缩放影响下,获取鼠标像素位置
先来看看AutoHotKey中,点击鼠标左键的命令 Clicks a mouse button at the specified coordinates. 这里需要获得像素位置. 实际上,很多对于鼠标 ...
- [图解]在输入框和文本框中获取和设置光标位置,以及选中文本和获取选中文本值的方法 --- 详解,兼容所有浏览器。...
为什么80%的码农都做不了架构师?>>> 写在前面 最近在segmentfault上看到它的日期输入控件,感觉挺有意思.好吧,动手写一个,加到自己的代码库里吧. 然后问题来了, ...
- JavaScript获取文本框光标的像素位置(转载)
[简介]本文主要实现获取textarea和input光标的像素位置,即光标的offsetLeft与offsetTop.可实现如下效果: 首先说明一下,在网上搜到的很多代码是如何获取输入光标位置的如下代 ...
- get_metrology_object_measures获取测量区域和计量模型的计量对象的边缘位置结果
目录 get_metrology_object_measures(算子) 描述 参数 get_metrology_object_measures(算子) get_metrology_object_me ...
- python四中方法获取列表中最大/最小的前n个数值的位置索引
转载自:https://blog.csdn.net/together_cz/article/details/84944927 今天遇到一个小问题就是要获取列表中最大/最小的前n个数值的位置索引,实现很 ...
- 禁止 input 自动填充
禁止 input 自动填充 在编写 Form 表单样式的时候,修改自动填充后的 input 样式是很麻烦甚至不可行的,而且还有一些不需要自动填充的场景. 浏览器根据保存数据时表单控件的 type 和 ...
- RoboMaster视觉教程(5)目标位置解算(通过像素点获取转角)
RoboMaster视觉教程(5)目标位置解算(通过像素点获取转角) 概览 直接使用像素坐标的缺陷 摄像头标定 根据小孔成像原理得到需要的转角 角度测量验证 概览 在识别到目标后,有一个很重要的问题: ...
- 关于input自动过滤特殊字符的简单方法
input自动过滤掉特殊字符方法 web开发过程中会经常遇到特殊字符的校验和处理,这里讨论将特殊字符替换为""的方式,当用户输入特殊字符后则直接删除. [html] view pl ...
- android获取拍摄视频的gps,关于gps:Android获取当前位置的最佳方式
本问题已经有最佳答案,请猛点这里访问. 在以下场景中获取android当前位置的最佳方法是什么, 如果GPS不可用,请从网络提供商处获取位置 如果GPS可用并且可以获得当前位置,请从GPS提供商处获取 ...
最新文章
- java的输出的例子_Java例子:万年历的输出
- java中队列链表栈的作用_Java用链表实现栈和队列
- 华为云WeLink正式发布,这是更懂企业的智能工作平台一枚!
- InnoDB与Myisam的六大区别
- PHP 实现简单购物车功能(2)
- MySQL的图形化安装
- awr报告分析 mysql_生成awr报告
- JavaScript 常见安全漏洞和自动化检测技术
- minimum_should_match参数
- sequelize时间自动格式化
- catgroup linux_linux中/etc/group文件详解
- 【最短路算法】第二弹:一文弄懂Bellman-Ford(贝尔曼福特算法)
- Java毕设项目在线答题系统计算机(附源码+系统+数据库+LW)
- 18其他算法(algo)——单纯的数据处理
- part1:推荐一些适合练手、课程设计、毕业设计的python小项目源码,无任何下载门槛
- 郑豪8.6非农数据提前布局,黄金是延续跌势还是多头反击?美盘操作建议
- 数字工厂管理系统的应用领域有哪些
- H3C防火墙web管理
- 详谈为什么互联网公司禁用外键约束
- Definition of Spline Basis Function
热门文章
- Hibernate之load和get的差别
- Java设计模式--策略模式
- 爬虫库之BeautifulSoup学习(五)
- [每日一题] 11gOCP 1z0-052 :2013-09-24 temporary tables.........................................C11...
- ZeroForums论坛正式开始测试运行
- ssh整合,明明已经导入包,却总是有很多ClassNotFoundException
- Ural 1297 Palindrome(后缀数组+最长回文子串)
- 将navigationbar的translucent属性设为No后,子控制器视图整体下移问题
- 大数据时代了解一些问题
- Ext中Grid重新load设置URL