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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 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 程序员也要学会使用“异常”
2009/06/16 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
关于人生的感言
2014/01/17 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
先进集体申报材料
2014/12/25 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
酒店厨房管理制度
2015/08/06 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB