如果是 <input><textarea> 一类输入框, 内部纯文本, 比较好模拟.
我的方案是使用相同的样式, 维护一份拷贝, 取出标签的宽度即可,
复杂一些的话就在结尾加一个标签, 能从标签获取到光标的位置..
window.getSelction().getRangeAt(0).startOffset 去取位置,
sel = getSelection()
document.onclick = function(event) {
event.preventDefault()
range = new Range
range.selectNode(event.target)
sel.removeAllRanges()
sel.addRange(range)
}
document.onclick = function(event) {
event.preventDefault()
console.log(event.target.getClientRects()[0])
}
Selection 对应的是界面上的选中内容, 而 Range 是 Selection 当中的一个选中的区域.
简单的理解是, 一个 Selection 里会有多个 Range, Range 包含起始位置结束位置等等,
起始未知需要知道在哪个节点, 偏移量是多少等等
当然还有根据 Selection 跟 Range 用上面的位置信息来 *** 作的 API
具体 *** 作的代码大概要结合 StackOverflow 上具体的用例来理解的了
简单的自己写一个比如, 选中点击位置...
这个两个 API 的兼容性有一些问题, 比如 new Range 会在 Safari 保存,
比如 range.baseNode 在 Firefox 下不存在..
为了减少兼容性造成的影响, 可以用 rangy 这个模块:
https://github.com/timdown/rangy/wiki
有点答跑题了.. 后面回到重点.. 答案在 MDN 关于这两个 API 的文档当中,
在 Range 的示例当中, 有试验的新 API 来提供对应的功能
https://developer.mozilla.org/en/docs/Web/API/Range
Range.getBoundingClientRect()
Returns a ClientRect object which bounds the entire contents of the Rangethis 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 可以用于获取标签的像素位置:
https://developer.mozilla.org/en-US/docs/Web/API/Element.getClientRects
The Element.getClientRects() method returns a collection of rectangles that indicate the bounding rectangles for each box in a client.
写个脚本测试一下, 确实 OK:
关于具体用例看网上的文章: http://www.css88.com/archives/4187
关于浏览器兼容性可以看这里, 似乎蛮好的: http://www.quirksmode.org/dom/w3c_cssom.html
方法/步骤：
1 .光标的坐标值分为鼠标点击的网页相对数值和屏幕对应的坐标值。下面分别讲下如何实现获得。
2 .首先讲解下网页中鼠标点击坐标。
在记事本或其他文本编辑器中输入html基本结构标签：<html><body></body></html>。
2 在html后输入头标签head ，并添加script标签代码。<head><script type="text/javascript"></script></head>。
3 在<script>标签中定义函数zuobiao()用来获取坐标值function zuobiao(event)
{xzb=event.clientXyzb=event.clientYalert("X 坐标: " + xzb + ", Y 坐标: " + yzb)}
点击<body>标签，定义鼠标事件onmousedown调用函数。
4 <body OnMouseDown="zuobiao(event)">在正文中随意添加一些说明文字。
5. <p>打开网页后点击任意位置，会d出窗口显示鼠标点击位置的 x 和 y 坐标。
6. 保存代码内容为html网页，然后预览测试效果。
html简介：
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
以下是我写的js代码可以实现这个要求： //半通明遮罩document.writeln("")var divGg = document.getElementById("divGg")//d出层document.writeln("关闭d出层")var divAdMsg = document.getElementById("divAdMsg")//显示打开d出层内容欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）