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-data的三种用法
Apr 18 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jQuery-App输入框实现实时搜索
Nov 19 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
用PHP调用Oracle存储过程
2006/10/09 PHP
php操作MongoDB类实例
2015/06/17 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
Python遍历numpy数组的实例
2018/04/04 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python try 异常处理(史上最全)
2019/03/07 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
中文系学生自荐信范文
2013/11/13 职场文书
物业保安岗位职责
2014/07/02 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
MySQL中varchar和char类型的区别
2021/11/17 MySQL
MySQL窗口函数的具体使用
2021/11/17 MySQL
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
Java Spring读取和存储详细操作
2022/08/05 Java/Android