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实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jquery传参及获取方式(两种方式)
Feb 13 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
在Python的Django框架中包装视图函数
2015/07/20 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python for循环中的陷阱详解
2018/07/13 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
Python 实现try重新执行
2019/12/21 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
医科大学生的自我评价
2013/12/04 职场文书
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python