博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
基于 jQuery & CSS3 实现智能提示输入框光标位置
阅读量:5065 次
发布时间:2019-06-12

本文共 726 字,大约阅读时间需要 2 分钟。

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

您可能感兴趣的相关文章

 

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

 

 

    

 

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

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

 

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

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

 

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

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

您可能感兴趣的相关文章

 

 

本文链接:

编译来源:

转载于:https://www.cnblogs.com/lhb25/archive/2012/12/16/smart-input-field-position-indicator-jquery-plugin.html

你可能感兴趣的文章
序列化和反序列化(1)---[Serializable]
查看>>
SQL优化
查看>>
利用Highcharts插件制作动态图表
查看>>
用C语言操纵Mysql
查看>>
轻松学MVC4.0–6 MVC的执行流程
查看>>
4.9 Parser Generators
查看>>
centos下安装nginx
查看>>
redis集群如何清理前缀相同的key
查看>>
redis7--hash set的操作
查看>>
20.字典
查看>>
Python 集合(Set)、字典(Dictionary)
查看>>
oracle用户锁定
查看>>
(转)盒子概念和DiV布局
查看>>
Android快速实现二维码扫描--Zxing
查看>>
获取元素
查看>>
nginx+lighttpd+memcache+mysql配置与调试
查看>>
ubuntu12.04 启动apache2 对.htaccess 的支持
查看>>
proxy写监听方法,实现响应式
查看>>
前端工具----iconfont
查看>>
Azure Site Recovery 通过一键式流程将虚拟机故障转移至 Azure虚拟机
查看>>