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.validate表单验证插件使用详解
Jun 21 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 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
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
JavaScript多线程的实现方法
2007/05/08 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
Python随手笔记之标准类型内建函数
2015/12/02 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python检查ping终端的方法
2019/01/26 Python
python同时遍历两个list用法说明
2020/05/02 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
校领导推荐信
2013/11/01 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
继电保护工岗位职责
2014/01/05 职场文书
清洁工岗位职责
2014/01/29 职场文书
抵押贷款承诺书
2014/05/30 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL