HTML5 resize field as you type

Works well for inline inputs, in story-telling or fill-in-the-blanks situations. Uses a debounce function. Works and tested on Chrome, Safari, Firefox. Shimmed for IE8.

by Imperative

HTML

<form>
        <p>I live in
            <input type="text" name="city" value="" placeholder="city name" id="city_name" class="placeholder" maxlength="27" pattern="[A-Za-z. '-]" />
            (
            <input type="text" name="zip" value="" placeholder="zipcode" id="zipcode" class="placeholder" maxlength="5" pattern="\d{5}" required />
            ), in a house that is about
            <input type="text" name="size" value="" id="house_size" placeholder="0" class="placeholder" maxlength="5" required pattern="(?=.*[1-9])\d{1,5}" />
            square feet and was built about
            <input type="text" name="history" value="" id="house_age" placeholder="0" class="placeholder" maxlength="3" required pattern="(?=.*[1-9])\d{1,3}" />
              years ago.</p>
        </form>
<div id="characters" style="position:absolute;left:-99999px;font-size:21px;"></div>

CSS

body {
  font-size:21px;
}
input[type=text],
input[type=number] {
  background:none;
  border:0;
  padding:0;
  color:#000;
  font-size:21px;
  line-height:30px;
  font-family:inherit;
  border-bottom:1px dashed #999;
  display:inline-block;
  text-align:center;
  -webkit-appearance:none;
  -moz-appearance:none;
  -o-appearance:none;
  -ms-appearance:none;
  z-index: 3;
  position: relative;
}
input.placeholder {
  color:#808080;
}
label.placeholder {
  color:#808080;
  padding:4px 15px;
  position:absolute;
  line-height:30px;
  pointer-events:none;
}
::-webkit-input-placeholder {
  color:#808080;
}
input:focus {
  outline:0px;
}

JavaScript

$(document).ready(function() {
    $('input[type=text]').each(function() {
        // generate IE placeholder
        var hasPlaceholder = 'placeholder' in document.createElement('input');
        if (!hasPlaceholder) $(this).before('<label class="placeholder" for="' + $(this).attr('id') + '">' + $(this).attr('placeholder') + '</label>');
        // add content from FB
        // resize inputs
        resize($(this));
    });
    $('body').on('keyup', 'input[type=text]', debounce(function input_text_change() {
        $(this).toggleClass('placeholder', $(this).val().length < 1);
        resize($(this));
    }, 50, true));

});

// debounce
var debounce = function(func, threshold, execAsap) {
    var timeout;
    return function debounced() {
        var obj = this,
            args = arguments;

        function delayed() {
            if (!execAsap) func.apply(obj, args);
            timeout = null;
        };
        if (timeout) clearTimeout(timeout);
        else if (execAsap) func.apply(obj, args);
        timeout = setTimeout(delayed, threshold || 100);
    };
}

// resize text field
var resize = function(input) {
    var maxlength = (typeof(input.attr('maxlength')) !== 'undefined') ? input.attr('maxlength') : 45,
        width = 0,
        placeholder = input.prev('label');

    if (input.val().length > 0) {
        width = ($('#characters').text(input.val()).width() + 30) + 'px';
        placeholder.hide();
    } else {
        width = typeof(input.attr('placeholder')) !== 'undefined' ? ($('#characters').text(input.attr('placeholder')).width() + 30) + 'px' : 'auto'
        placeholder.css('display', 'inline-block');
    }
    input.css({
        'width': width
    });
}