How to autogrow a textbox that has a variable font size

July 11, 2018, at 04:00 AM

I am coding a website that lets you test typefaces and just like google fonts, the textarea in which you type should autogrow, when the user types in more text.

I tried this plugin by jaz303 and it works fine, if the font-size stays the same.

  (function($) {
 * Auto-growing textareas; technique ripped from Facebook
$.fn.autogrow = function(options) {
  return this.filter('textarea').each(function() {
    var self = this;
    var $self = $(self);
    var minHeight = $self.height();
    var noFlickerPad = $self.hasClass('autogrow-short') ? 0 : parseInt($self.css('lineHeight')) || 0;
    var settings = $.extend({
      preGrowCallback: null,
      postGrowCallback: null
    }, options);
    var shadow = $('<div></div>').css({
      position: 'absolute',
      top: -10000,
      left: -10000,
      width: $self.width(),
      fontSize: $self.css('fontSize'),
      fontFamily: $self.css('fontFamily'),
      fontWeight: $self.css('fontWeight'),
      lineHeight: $self.css('lineHeight'),
      resize: 'none',
      'word-wrap': 'break-word'
    var update = function(event) {
      var times = function(string, number) {
        for (var i = 0, r = ''; i < number; i++) r += string;
        return r;
      var val = self.value.replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/\n$/, '<br/>&#xa0;')
        .replace(/\n/g, '<br/>')
        .replace(/ {2,}/g, function(space) {
          return times('&#xa0;', space.length - 1) + ' '
      // Did enter get pressed?  Resize in this keydown event so that the flicker doesn't occur.
      if (event && && === 'keydown' && event.keyCode === 13) {
        val += '<br />';
      shadow.css('width', $self.width());
      shadow.html(val + (noFlickerPad === 0 ? '...' : '')); // Append '...' to resize pre-emptively.
      var newHeight = Math.max(shadow.height() + noFlickerPad, minHeight);
      if (settings.preGrowCallback != null) {
        newHeight = settings.preGrowCallback($self, shadow, newHeight, minHeight);
      if (settings.postGrowCallback != null) {
      event: 'keydown'
    }, update);

However, I need the possibility for the user to change the font-size while testing and for some reason the autogrow doesn’t work anymore, as soon as I change the size.

Here is my Test jsFiddle:

Answer 1

The solution is to relaunch $("#autoGrowTextArea").autogrow(); when the slider value changes...

Sample code for doing this :

$("input[type='range']").change( function() { 

New JSfiddle here :

Answer 2

You can achieve this with css as well using height and width in em units. Em means relative to the font-size of the element (2em means 2 times the size of the current font)

I don't know if this works well together with the autogrowth plugin though.

        $(".ta").css("font-size", "12px"); 
        $(".ta").css("font-size", "24px"); 
        $(".ta").css("font-size", "36px"); 
.ta { 
  font-size: 12px; 
  height: 3em; 
  width: 10em; 
  resize: none; 
<script src=""></script> 
    <textarea class="ta">test</textarea> 
    <button id="font-small">fontsmall</button> 
    <button id="font-big">fontbig</button> 
    <button id="font-huge">fonthuge</button> 

Rent Charter Buses Company
Vue js - making a style to be inherited by children components

Vue js - making a style to be inherited by children components

First of all, when I want to make a style private for the current component, I define it inside a tagTo make the style visible for child components, I'm using a deep selector to let it pass through, as below:

.Net App_Theme loading both minified and non-minified stylesheets

.Net App_Theme loading both minified and non-minified stylesheets

I am compiling sass using theNet 'Web Compiler', and have set complierconfig

PHP script keeps returning number values as strings

PHP script keeps returning number values as strings

I have PHP script that makes an connection to a mySQL database that makes a query and returns data that is then looped through and added to an arrayHere is my php script: