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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jquery实现拖拽添加元素功能
Dec 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
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
php5与php7的区别点总结
2019/10/11 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
javascript的内存管理详解
2013/08/07 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
机器学习实战之knn算法pandas
2019/06/22 Python
python如何将多个PDF进行合并
2019/08/13 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
努比亚手机官网:nubia
2016/10/06 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
高职助产应届生自荐信
2013/09/24 职场文书
大学生学习生活的自我评价
2013/11/01 职场文书
就业协议书怎么填
2014/09/15 职场文书
环保宣传语大全
2015/07/13 职场文书
幼儿园小班教学反思
2016/03/03 职场文书