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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 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 的 __FILE__ 常量
2007/01/15 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
js获取Get值的方法
2016/09/29 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
Vue 中mixin 的用法详解
2018/04/23 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
Python跳出循环语句continue与break的区别
2014/08/25 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
浅谈Python中的bs4基础
2018/10/21 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
一份创业计划书范文
2014/02/08 职场文书
保护水资源的标语
2014/06/17 职场文书
幼儿园标语大全
2014/06/19 职场文书
个人收入证明格式
2015/06/24 职场文书
导游词之青岛太清宫
2019/12/13 职场文书