- 浏览: 1466285 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
最近需要从 textarea 中获取当前输入的光标位置以及绝对坐标,希望达到 github 以及 weibo 输入自动提示的效果,例如:
如今网络上都是零散的技巧(包括曾今的一篇),没有完善可靠的解决方案,于是就直接把这些功能实现兼容到 KISSY 的 DOM 操作中。
兼容正规化
cursor position
光标位置(cursor position) w3c 已经提供了简洁的 api ,selectionStart 与 selectionEnd 两个读写属性,那么对于 ie 只需要利用其私有的 range api 重新实现这两个属性的读写操作即可。
注意点
1. textarea 的换行 ie 中是两个字符 "\r\n"
2. range move 的单位是 character,而一次move又会越过 "\r\n" 两个字符。
3. 当光标位于 "\r\n" 后时,range.text 属性不包括最后的两个换行字符.
4. 当移动光标开始位置到结束位置后面时需要将光标的结束位置设为和光标开始位置相同
当移动光标结束位置到开始位置前面时需要将光标的开始位置设为和光标结束位置相同
最终即可统一到 w3c 的读写属性 api:
textarea.prop("selectionStart") // => 获取光标开始位置 textarea.prop("selectionEnd") // => 获取光标结束位置 textarea.prop("selectionStart",value) // => 设置光标开始位置 textarea.prop("selectionEnd",value) // => 获取光标结束位置
cursor coordinates
ie 可通过 boundingLeft/Top 加上滚动距离直接获得当前光标的绝对坐标,而对于标准浏览器则需要
1. 通过构建 fake div 使得其具备和 textarea 一样的 fontSize/line-height/fontWeight 等影响文字大小的属性以及同 textarea 一样的 width/height 盒子大小属性
2. 然后设置 fake div 的内容为 textarea 当前光标以前的所有内容,并在最后位置插入 marker (span) 元素
3. 最终取得 marker 的绝对坐标即是当前光标的绝对坐标。
注意点
1. textarea 浏览器一般都默认有 padding 和 margin,需要同时取过来,否则会造成误差。
2. fake div 需要设置样式 word-wrap:break-word 以及 white-space:pre-wrap, 达到当输入连续字母时和 textarea 一样强制换行的效果.
其中 white-space:pre-wrap 是 chrome 的默认样式,而 firefox 虽然默认为 normal,但是普通 div 要想达到和 textarea 一样的输入换行,仍需要强制设置为 pre-wrap
3. 最诡异的一点: textarea 的空白需要转换为 <span style="white-space:pre-wrap;"> </span>
如果只是简单的 , 因为 chrome textarea 连续输入的空格不会导致 textarea 换行,转换为 后会导致 fake div 换行,造成后续光标位置误差.
而如果转换成 <span style="white-space:pre-wrap;"> </span> 则不会有该问题,查询 white-space 规范后原因仍不明。
3. textarea 的内容需要经过 escapeHTML 后填入到 fake div 中,防止用户输入 < > 等 html 特殊标记。
4. 需要注意 textarea 的滚动,textarea 会随着用户的输入进而产生 scroll,这时需要在取得 marker 的绝对坐标后减去 scroll 的距离。
5. marker 需要有文字内容,否则空元素的 marker 在换行后得不到正确坐标,也是为了下面的注意点 6
6. ie boundingTop 取得的是光标下边界坐标,marker 取的则是光标上边界距离,这时就需要减去 marker 自身的高度(因此要求 marker 不为空元素,需要有文字)
known issue
即使考虑了上述所有注意点,在特定输入下,仍然会有位置误差,例如:
chrome:
firefox:
注:上为原始 textarea ,下为模拟的 div
updated : 将原始 textarea 设置为 margin:0; padding:0; 后 firefox 完全一致,但 chrome 仍有少许误差。
updated : 将 fake div 设置为 pre-wrap ,则位置完全没有误差了!
api
最后此功能也可以封装到私有属性中,模仿浏览器加个 Ks 前缀即可
textarea.prop("KsCursorCoordinates") // => {left:xx,top:yy}
demo
get cursor position and coordinates
Code
评论
https://github.com/kissyteam/kissy/issues?state=open
具体讨论,如果能提供 pull request 就更好了
根据demo,我认为这个获取光标位置的接口,预期是:
A.获取该光标,相对textarea所在的frame (0,0)点的坐标
而不是:
B.获取该光标,相对最顶级frame (0,0)点的坐标
但实际测试发现:
1.firefox16,这个接口是符合预期A的。(内部路径走的是fakeDiv的分支)
2.IE8,使用兼容模式,也是符合预期A的。(内部路径走的是doc.selection的分支)
3.IE8,使用IE7模式或IE7兼容模式,就不符合预期了。变成了B.
具体可见这个地址的测试:
http://jsfiddle.net/hunter3721/3LQyS/3/embedded/result/
此外,请关注一下另外1个bug:
firefox16下(其他版本未测试),宽度为297时,textarea一行的字符数和fakediv不同,导致偏移。
根据demo,我认为这个获取光标位置的接口,预期是:
A.获取该光标,相对textarea所在的frame (0,0)点的坐标
而不是:
B.获取该光标,相对最顶级frame (0,0)点的坐标
但实际测试发现:
1.firefox16,这个接口是符合预期A的。(内部路径走的是fakeDiv的分支)
2.IE8,使用兼容模式,也是符合预期A的。(内部路径走的是doc.selection的分支)
3.IE8,使用IE7模式或IE7兼容模式,就不符合预期了。变成了B.
具体可见这个地址的测试:
http://jsfiddle.net/hunter3721/3LQyS/3/embedded/result/
此外,请关注一下另外1个bug:
firefox16下(其他版本未测试),宽度为297时,textarea一行的字符数和fakediv不同,导致偏移。
发表评论
-
continuation, cps
2013-09-12 16:49 2813起 随着 nodejs 的兴起,异步编程成为一种潮流 ... -
一种基于匹配回朔的 css3 选择器引擎实现
2013-05-07 20:40 3416一种基于匹配回朔的 css3 选择器引擎实现 介绍 C ... -
cubic-bezier 模拟实现
2013-01-05 16:34 14112cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
构建前端 DSL
2012-10-11 22:10 5375目前在传统的软件开 ... -
兼容 ie 的 transform
2012-02-23 14:00 6446css 2d transform 是 css3 引入的一个新的 ... -
promise api 与应用场景
2012-02-07 17:34 7404promise 是 commonjs 社区中提出的异步规范,其 ... -
closure compiler 代码优化实例
2012-01-08 03:23 2845closure compiler 可以进行不少有意思的优化 ... -
write html parser
2011-12-01 02:48 2928首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
获取剪贴板数据
2011-11-07 23:31 6462兼容性: 获取剪贴板数据这块各个浏览器间存在很大的 ... -
url 映射问题
2011-11-07 21:52 3232背景 url mapping 我最早知道是作为 j ... -
tip:如何原生播放声音
2011-10-19 12:45 2987如果不想考虑浏览器间 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2856简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2855场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2274分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 7080作为前端开放的基础安全保证,caja 是目前比较合 ... -
tokenization of html
2011-08-29 22:38 2796html 符号解析问题 场景: 在页面上输出包 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2485这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
循环引用下的深度克隆
2011-08-04 20:39 2330深度复制和浅度复制 是当初初学 c 遇到的第一批问题,似乎使 ... -
模块的静态与动态循环依赖
2011-07-25 03:43 3288场景: 循环依赖 我是不支持的,但现实中似乎又确实需 ... -
visual rect computation of element
2011-07-14 21:50 23703元素的可视矩阵(区域)计算 元素常常需要展现在用户 ...
相关推荐
在这个场景中,"Print the name and coordinates of the beads"是一个任务,它涉及到在Material Studio中处理分子模型时,获取并打印出“beads”的名称和坐标。 “Beads”在这里通常是指模拟中的原子或分子团簇,...
2. Calculation of Geodetic Coordinates from Radar Spherical Coordinates 3 2.1. What do we know! 3 2.2. Calculation of Geocentric Coordinates 5 2.3. Transformations of Geocentric to Geodetic ...
Addressing tiles: same tile bounds with different indexes There are three main systems of tile adressing: Google XYZ, Microsoft QuadTree and from the open-source world comming TMS (Tile Map Service).
Position and orientation of indoor mobile robots must be obtained real timely during operation in structured industrial environment, so as to ensure the security and efficiency of cargo transportation...
【坐标选择器coordinates-picker前端项目详解】 在前端开发中,有时候我们需要实现用户在地图上选择位置的功能,并将这些位置信息以特定格式存储。"前端项目-coordinates-picker"就是这样一个工具,它提供了一个...
canonical analysis of principal coordinates原作者开发的软件版本。
位置坐标 该网页可让您保持位置警戒 在安装之前,这些是有关此项目的一些信息: 这个项目是一种获取位置坐标的安全方式,您的数据不会存储在任何地方; 本项目由MH15O制作,可免费下载,但不得从中获利或用于任何...
Generalized Barycentric Coordinates in Computer Graphics and Computational Mechanics 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自...
这个场景中提到的"tap_coordinates_mouse_elseoac_coordinates_"很可能是某个工具或脚本的名称,它允许用户通过鼠标点击来获取图像上的像素坐标。这种功能常用于图像识别或者自动化测试中,例如在手机应用或网页的UI...
"tap_coordinates_image_event_coordinates_"这个标题暗示了我们讨论的主题与图像上的触摸或点击事件及其坐标有关。当我们与图像进行交互,比如点击或者触摸,系统会记录下这个交互发生的具体位置,也就是事件坐标。...
read data from pdb file and get the coordinates of the atoms. Calculate the bond length and bong angles from the coordinates.
You’ll discover what layers, scales, coordinates, and themes are, and study how you can use them to transform your data into aesthetical graphs. Once you’ve grasped the basics, you’ll move on to ...
- **Absolute Position**: The exact position of the PTZ node in terms of pan, tilt, and zoom coordinates. - **Relative Movement**: The movement of the PTZ node relative to its current position. - **...
unsigned from = map_geo_position.find_nearest_neighbor_within_radius(from_latitude, from_longitude, 1000).id; if(from == invalid_id){ cout << "No node within 1000m from source position" ; continue...
This specification was developed in response to a perceived need for a standardized programming inter-face to digitizing tablets, three dimensional position sensors, and other pointing devices by a ...
In order to estimate the position and orientation of an object with a single camera, a novel measurement method based on pinhole camera model with five reference points is presented. Taking the ...
Physically Based Rendering from Theory to Implementation 一共3部分~~~~~~~~~, 源码下载to h t t p ://www.p b r t . o r g /downloads.php /////////////////////////////////// CHAPTER 01. ...
《RGB Coordinates of the Macbeth ColorChecker—已解密》这篇文档由Danny Pascale撰写,来自The BabelColor Company,主要介绍了Macbeth ColorChecker色卡在不同RGB色彩空间中的坐标值。该文档提供了在Adobe、...
the authors mainly analyse several factors influencing CNN performance from two aspects: (i) the position relationships between feature points and (ii) the normalisation methods of coordinates....
Drawing with markup: Learn the vector language of x and y coordinates that let SVG create basic and custom shapes Putting graphics in their place: Use the coordinate system to draw SVG shapes and text...