Editable Label in jQuery

In this post I give the demo of editable label using jquery. In this demo I create a label and textbox. And with the help of jquery I bind events to convert textbox into label and label to textbox for editing.

<head>

<title>Editable Label</title>

$(document).ready(function () {

$('#txt').blur(function () {

if ($('#txt').val().trim() != '') {

$('#txt').hide();

$('#lbl').html($('#txt').val());

$('#txt').val('');

}

});

$('#lbl').click(function () {

if ($('#lbl').html().trim() != '') {

$('#txt').show();

$('#txt').val($('#lbl').html());

$('#lbl').html('');

}

});

</script>

</head>

<body>

<h4>

Editable Label using Jquery</h4>

</div>

</body>

</html>

Moving ball in jQuery.