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元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery实现带进度条的轮播图
Sep 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
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
js同源策略详解
2015/05/21 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
django项目中新增app的2种实现方法
2020/04/01 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
数据库的约束含义
2012/09/09 面试题
集团公司总经理岗位职责
2013/12/20 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
体检通知范文
2015/04/21 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书