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

简介:   对于一个给定的输入框,如果在文本超过输入框的时候能显示当前光标在整个输入的字符串中所在的位置和剩余多少文本,那将会非常棒!如果可以在任何网站不修改 DOM 就可以实现这个功能,那该多好。  您可能感兴趣的相关文章 12款很棒的浏览器兼容性测试工具推荐 10套精美的免费网站后台管理系统模板 开发者必备的8个最佳云端集成开发环境 十款精心挑选的在线CSS3代码生成工具 推荐8款优秀的免费 Web 安全测试工具     在这篇文章中,我们使用 jQuery 实现智能输入框光标的位置。

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

您可能感兴趣的相关文章

 

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

 

 

下载源码    在线演示

 

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

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

 

  使用非常简单,下面是示例代码:

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

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

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

 

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

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

您可能感兴趣的相关文章

 

 

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

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

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

相关文章
|
1月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
15 1
jQuery+CSS3自动轮播焦点图特效源码
|
4月前
|
前端开发 JavaScript
如何利用jQuery来向一个元素中添加和移除CSS类?
如何利用jQuery来向一个元素中添加和移除CSS类?
28 0
|
6月前
|
JSON JavaScript 前端开发
jQuery$工具方法和CSS的属性经及方法
jQuery$工具方法和CSS的属性经及方法
38 0
|
7月前
|
前端开发 JavaScript
jQuery css() 使用
jQuery css() 使用
30 0
|
7月前
|
前端开发
css改input变输入框光标颜色demo效果示例(整理)
css改input变输入框光标颜色demo效果示例(整理)
|
1月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
17 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
16 0
|
3月前
|
Java 数据库 Android开发
基于SSM框架扶贫信息综合平台前台管理系统(spring+springmvc+mybatis+jsp+jquery+css)
基于SSM框架扶贫信息综合平台前台管理系统(spring+springmvc+mybatis+jsp+jquery+css)
|
4月前
|
前端开发
(css必看)禁止用户拖动,禁止选中复制,禁止输入框输入
(css必看)禁止用户拖动,禁止选中复制,禁止输入框输入
99 1