对于一个给定的输入框，如果在文本超过输入框的时候能显示当前光标在整个输入的字符串中所在的位置和剩余多少文本，那将会非常棒！如果可以在任何网站不修改 DOM 就可以实现这个功能，那该多好。 

 

　　在这篇文章中，我们使用 jQuery 实现智能输入框光标的位置。它不需要图像，是使用纯粹的 CSS3 实现的，而且实时、准确，这意味着你在添加或删除文本的时候它会自动适应。使用事件代理机制实现，所以不用担心性能问题。

 

jquery 移动光标 jquery 设置光标_javascript

 

下载源码    在线演示

 

　　这款插件的只要有以下特色：

  • 不需要图片，纯 CSS 渲染；
  • 不需要额外的 DOM 支持；
  • 支持文本选择自动移动方向；
  • 准确和动态，这意味着你添加或删除文本它会自动适应；
  • 只有在文本超出输入框可视区域的时候才显示；
  • 使用事件代理机制实现，不用担心性能问题；

 

　　使用非常简单，下面是示例代码：



// 初始化
$('input:text').inputIndicator();

// 初始化时设置背景位置
$('input:text').inputIndicator({ bgPos:'31px' }); 

// 取消提示 
$('input:text').inputIndicator('destroy');



 

　　JSFiddle 在线演示（如果下面的演示不能显示请刷新页面或者访问地址：http://jsfiddle.net/indicator/）：

 　　浏览器兼容：在 Chrome、Firefox 和 Safari 浏览器中效果最佳！