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插件
Mar 29 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery实现推拉门效果
Oct 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
德劲1104的电路分析与改良
2021/03/01 无线电
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
JavaScript WeakMap使用详解
2021/02/05 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python字典的常用方法总结
2019/07/31 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
医学生职业规划范文
2014/01/05 职场文书
创建青年文明号材料
2014/05/09 职场文书
先进党组织事迹材料
2014/12/26 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python