基于 jQuery & CSS3 实现智能提示输入框光标位置

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

您可能感兴趣的相关文章

• 12款很棒的浏览器兼容性测试工具推荐
• 10套精美的免费网站后台管理系统模板
• 开发者必备的8个最佳云端集成开发环境
• 十款精心挑选的在线CSS3代码生成工具
• 推荐8款优秀的免费 Web 安全测试工具

 

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

 

 

下载源码    在线演示

 

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

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

 

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

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

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

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

 

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

style="width: 100%; height: 300px;" src="http://jsfiddle.net/tWFNN/27/embedded/result/" frameborder="0" width="320" height="240">

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

您可能感兴趣的相关文章

 

• 10套精美的免费网站后台管理系统模板
• 精心挑选的优秀 jQuery Ajax 分页插件
• 十款精心挑选的在线CSS3代码生成工具
• 让人爱不释手的13套精美网页图标素材
• Web前沿：那些让人惊叹的CSS3应用

 

本文链接：创新应用：一款智能提示输入位置的 jQuery 插件

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>