jQuery 控制文本框自動縮小字體填充
更新時間：2017年06月16日 11:47:29 作者：迷失道
這篇文章主要介紹了jQuery 控制文本框自動縮小字體填充的相關資料,需要的朋友可以參考下
js控制文本框自動縮小字體填充，當文本框中的字體超出文本框范圍的時候，框內(nèi)的字體會自動縮小，以填充整個文本框;
調用：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 () {
//循環(huán)修改大小直至大于最大高度
for (var i = minSize; i < maxSize; i++) {
if ($(this).height() > maxHeight) {
//當容器高度大于最大高度的時候，上一個嘗試的值就是最佳大小。
$(this).css('font-size', (i - 2) + 'px');
//結束循環(huán)
break;
} else {
//如果小于最大高度，文字大小加1繼續(xù)嘗試
$(this).css('font-size', i + 'px');
}
}
});
};
以上所述是小編給大家介紹的jQuery 控制文本框自動縮小字體填充，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
文本輸入框內(nèi)的字數(shù)不能確定，而input type="text"的size是固定的，當字數(shù)超過size時（默認是20），先輸入的內(nèi)容就會從文本框的左端隱藏起來，不便于輸入。2010-04-04
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)一組圖片循環(huán)滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
jQuery用FormData實現(xiàn)文件上傳的方法
眾所周知文件上傳是Web開發(fā)中的重要話題，最直接和簡單的方式是通過表單直接提交文件。 下面這篇文章小編就來和大家分享jQuery利用FormData實現(xiàn)文件上傳的方法，文中介紹的方法簡單易懂，相信對大家的理解和學習很有幫助，有需要的朋友們下面來一起學習學習吧。2016-11-11
這篇文章主要介紹了幫助你創(chuàng)建更好的jQuery插件的10條建議,涉及jQuery插件設計中常用的技巧,需要的朋友可以參考下2015-05-05
本篇文章，小編將為大家介紹，在jQuery中 關于json空對象篩選替換，有需要的朋友可以參考一下2013-04-04
Jquery通過JSON字符串創(chuàng)建JSON對象
這篇文章主要介紹了Jquery如何通過JSON字符串創(chuàng)建JSON對象,并附詳細示例，需要的朋友可以參考下2014-08-08
這篇文章主要介紹了jquery為頁面增加快捷鍵的示例,需要的朋友可以參考下2014-01-01
本文詳細講解了JQuery中this的指向，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細介紹了最常見的左側分類菜單欄jQuery實現(xiàn)代碼,仿京東、淘寶等各大類網(wǎng)站效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了 jquery實現(xiàn)圖片跟隨鼠標的實例的相關資料,希望通過本文能幫助到大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10