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

发布者

小懿

RingCentral敏捷教练 不懂技术的产品经理不是好教练!

发表评论

邮箱地址不会被公开。 必填项已用*标注