jQuery 控制文本框自动缩小字体填充


Posted in jQuery onJune 16, 2017

 js控制文本框自动缩小字体填充,当文本框中的字体超出文本框范围的时候,框内的字体会自动缩小,以填充整个文本框;

调用:resetFontSize($(".title"), 50, 10, 20);//重置字体大小

wordbox:jQuery对象
maxHeight:box的最大高度
minSize:最小字体大小
maxSize:最大字体大小

this.resetFontSize=function (wordbox, maxHeight, minSize, maxSize) { 
    //  var wordbox = $(".products .title"); 
    //最大高度 
    //var maxHeight = 30; 
    //初始化文字大小为最小 
    wordbox.css('font-size', minSize + "px"); 
    maxSize++; 
    wordbox.each(function () { 
      //循环修改大小直至大于最大高度 
      for (var i = minSize; i < maxSize; i++) { 
        if ($(this).height() > maxHeight) { 
          //当容器高度大于最大高度的时候,上一个尝试的值就是最佳大小。 
          $(this).css('font-size', (i - 2) + 'px'); 
          //结束循环 
          break; 
        } else { 
          //如果小于最大高度,文字大小加1继续尝试 
          $(this).css('font-size', i + 'px'); 
        } 
      } 
    }); 
  };

以上所述是小编给大家介绍的jQuery 控制文本框自动缩小字体填充,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 #jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 #jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 #jQuery
jQuery ajax动态生成table功能示例
Jun 14 #jQuery
jQuery.form.js的使用详解
Jun 14 #jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 #jQuery
You might like
十天学会php之第三天
2006/10/09 PHP
如何使用Strace调试工具
2013/06/03 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
扩展String功能方法
2006/09/22 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
AngularJS基础知识
2014/12/21 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python验证码识别的方法
2015/07/10 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
2014年保管员工作总结
2014/11/18 职场文书
老公保证书怎么写
2015/02/26 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
MySQL 服务和数据库管理
2021/11/11 MySQL
mysql如何查询连续记录
2022/05/11 MySQL