Enter event-preview function

by Alin Guta

HTML

<input type="text" value="Example: website and branding" id="last" name="last" class="fields" onFocus="if(this.value == 'Example: website and branding') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Example: website and branding';}" />

<br><br>
    
<p id="preview"></p><div class="blink"></div>

CSS

.fields {
	font: 22px 'Calibri';
	line-height:30px;
	position:relative;
	color: #999;
	background-color: #c2e7f7;
	border: 10px solid #fd8a64;
	width: 680px;
	overflow: auto;
	text-indent:15px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#preview{
    display:none;
    float:left;
    line-height:14px;
    font-size:14px;
    position:relative;
    margin:0;
    padding:0;
}
.blink{
    width:1px;
    height:14px;
    background:#666;
    float:left;
    position:relative;
    margin:0 3px;
    padding:0;
}

JavaScript

(function runIt() {
      $('.blink').fadeOut('slow', function(){
        $('.blink').fadeIn('slow', function(){
          runIt()
        });
      });
    }());
    
$('input').bind('keypress', function(e) {
	if(e.keyCode==13){
        $(this).animate({
            'line-height': '50px'
        })
	}
});

$('input').keyup(function(){
$('#preview').text($(this).val()).fadeIn();
});