jQuery control text box automatically shrinks font filling example sharing

js controls the text box to automatically reduce the font filling. When the font in the text box exceeds the range of the text box, the font in the box will automatically shrink to fill the entire text box. This article mainly introduces the relevant information about jQuery controlling the automatic reduction of font filling in text boxes. Friends in need can refer to it. I hope it can help everyone.

Call: resetFontSize($(".title"), 50, 10, 20);//Reset font size

wordbox:jQuery object
maxHeight: the maximum height of the box
minSize: the minimum font size
maxSize: the maximum font size

##

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(&#39;font-size&#39;, (i - 2) + &#39;px&#39;); 
          //结束循环 
          break; 
        } else { 
          //如果小于最大高度，文字大小加1继续尝试 
          $(this).css(&#39;font-size&#39;, i + &#39;px&#39;); 
        } 
      } 
    }); 
  };

Related recommendations:

How does jQuery add the value in the drop-down box to the text box when you click it

Example explains how jQuery adds the value in the drop-down box to the text box when you click it

Introduction to the method of using JavaScript to realize that only numbers can be entered into the text box

The above is the detailed content of jQuery control text box automatically shrinks font filling example sharing. For more information, please follow other related articles on the PHP Chinese website!