Autoexpand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autoexpand Demo - Interface plugin for jQuery</title>

<!-- Use your current version of jQuery below -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<!-- "Autoexpand" form "Interface Elements for jQuery" is installed here -->
<script type="text/javascript" src="iexpander.js"></script>

<style type="text/css" media="all">

body{
    background: #fff;
    height: 100%;
}
.input1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18pt;
    font-weight: bold;
}
.input2{
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    font-style: italic;
}
.textarea1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18pt;
    font-weight: bold;
    word-spacing:
}
.input3{
    font-family: "Times New Roman", Times, serif;
    font-size: 30px;
    background-color: #000000;
    color: #00ff00;
    font-style: italic;
}

</style>

<script type="text/javascript">
/*

   An asset file has been loaded as seen in "Manage Resources" tab for jsFiddle on left panel.

   The asset file is from "Interface Elements for jQuery" collection that requires no other dependencies.
   Visit http://interface.eyecon.ro/   and check out the Documentation section for Examples.

   This particular asset file is "Autoexpand" and is a tiny 2kb in size (iexpander.js is file name).
   It takes into account many font related CSS that may be used and is based on .keyup and .keypress.
   The source file shows it takes care of "HTML pasted contents" into the input box wonderfully (e.g., removes newlines).

   Best of all, it is free for private or commerical use via dual licensed (MIT license and GPL).

*/


// Below will define each item on the page with maximum width in PX. Last item also includes height.
// Typically this is in jQuery Document Ready function but loading mechanism from jsFiddle is used instead.
// EDIT: This version is outside jsFiddle sandbox so jQuery Document Ready IS used.
// Reference:  http://jsfiddle.net/yQwkL/
//
$(document).ready(function(){

    $('.input1').Autoexpand(400);
    $('.input2').Autoexpand(800);
    $('.input3').Autoexpand(2000);
    $('.textarea1').Autoexpand([500, 500]);

});


// Below is just for demo's "automatically EXPAND" and "RESET" shown on webpage.
//
function populateBOX(){
    $('.input3').attr('value','This input box has been resized automatically.').Autoexpand();
}

function resetBOX(){
    $('.input3').attr('value','stackoverflow').Autoexpand();
}

</script>
</head>
<body>

<p>This input box is limited to 400px in width.</p>
<form action=""><input type="text" size="2" class="input1" value="limit 400px" /></form><br /><br />

<p>This input box is limited to 800px in width.</p>
<form action=""><input type="text" size="2" class="input2" value="limit 800px" /></form><br /><br />

<p>This input box is limited to 500px in width and height.</p>
<textarea cols="1" rows="1" class="textarea1">limit 500px and 500px</textarea><br /><br />

<p>This input box like the others above will <b>AUTOSIZE</b> up to 2000px width.</p>
<form action=""><input type="text" size="2" class="input3" value="stackoverflow" style="width:50px;" /></form><br /><br />

<a href="#" onclick="populateBOX(); return false;">Click to automatically EXPAND last input box with text.</a><br /><br />
<a href="#" onclick="resetBOX(); return false;">Click to RESET last input box</a>

</body>
</html>