jQuery Position 插件 – 定位textarea与input中光标的字符位置

上一篇文章发布了一个获取texarea中光标的坐标(x,y)
这次发布的一个插件同样是针对textarea中光标的定位的,只不过是字符的位置信息。。

这个插件网上搜会比较多。。不过大多的都是不完整版本,不是浏览器兼容就是出现BUG。。。

这次这个插件结合作者全冠清的原插件,经过窥视新浪微博脚本,进行二次开发!

兼容全浏览器,修复IE定位BUG

插件下载

jquery caretposition getter – 获取textarea中光标坐标(x,y)的jQuery插件

 

首先请注意,这不只是获取光标所在字符数位置的插件,这是获取坐标x,y的插件,但其中包含前者。

其实这个插件比较常见,大多数人都用过,就是新浪微博中@功能的弹出提示功能的一个前身。由于最近就业工场需要上这么一个@功能,在网上海捞了很久,没有十分好的,StackOverflow中谈论的比较多,但也确实没有一个浏览器兼容性到位的。所以就写了这么一个。

实现原理很简单:IE浏览器原生支持通过一些简单的计算获取;而IE之外的浏览器就要通过模拟实现了,用Div来模拟一个Textarea,将当前光标所在位置之前的文字(before)内容插入的div前端,接着插入光标(focus),最后插入后段信息(after)。之后计算focus对于Textarea的相对位置。

这里需要注意的有几点:

  1. 模拟Textarea需要将关键样式模拟到位;
  2. 对于英文长单词的折行,断句等在不同浏览器中有不同的表现,需要多测试测试;
  3. 无线空格,在Textarea中是不折行的,但在模拟的DIV中是折行的
诚恳的说:对于上述两个问题的2与3当前版本还没有解决,如果你有比较好的解决办法,欢迎帮助改善!

已测试过的浏览器:IE 6/7/8/9,Firefox,Chrome

Demo Downoad Github

 

转自:http://bevis.me/jquery-caret-position-getter