This takes the input and, onfocus, adds a div over-top of the input. This makes it look like the user is typing when they really aren't.

format_tweet.html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<style type="text/css">

	body,
	input{
		font-family: arial;
	}

	#tweet{
		font-size: 30px;
		border: 1px solid #e1e1e1;
		padding: 5px;
		min-width: 100px;
	}

	#unusable{
		color: #e1e1e1;
	}
	
	#current_tweet{
		font-size: 30px;
		margin-top: -56px;
		margin-left: 6px;
		border: 1px solid #e1e1e1;
		padding: 5px;
		display: none;
		min-width: 100px;
		min-height: 40px;
	}

	#tweet_it{
		margin-top: 40px;
		float: left;
		clear: both;
		width: 100%;
	}

</style>

<h1>Type here:</h1>

<p><input type="text" id="tweet" /><div id="unusable"></div></p>

<p id="current_tweet"></p>

<p><a href="" id="tweet_it">Tweet It</a></p>

<script type="text/javascript">

var max = 140;

function format_tweet(tweet){

    var current_length = tweet.length;

    if(current_length > max){
    
    	var original_tweet = tweet;
    
    	tweet = original_tweet.substr(0, max);
    	tweet = '<span id="tweetable">' + tweet + '</span><span id="unusable">' + original_tweet.substr(max, 1000000000) + '</span>';
    
    }else{
    
    	tweet = '<span id="tweetable">' + tweet + '</span>';
    
    }
    
	return tweet;
	
}

jQuery('#tweet').keyup(function(e){

    var self = jQuery(this);
    
    var tweet = self.val();
    
	tweet = format_tweet(tweet);
	
	jQuery('#current_tweet').html(tweet);
            
});

/*

	Submit only the tweetable area

*/

jQuery('#tweet_it').click(function(e){

	e.preventDefault();
	
	alert('You tweeted: ' + jQuery('#tweetable').text());
	
});

/*

	Hide the input on focus

*/

jQuery('#tweet').focus(function(){

	jQuery(this).css('opacity', '0');
	jQuery('#current_tweet').show().html(format_tweet(jQuery('#tweet').val()));

});

</script>