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.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Editable Label</title>

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

<script type="text/javascript">

$(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>

<div align="center">

<h4>

Editable Label using Jquery</h4>

<span id="lbl" style="color: #ff0000; font-size: 14px; font-weight: bold;"></span>

<input id="txt" type="text" />

</div>

</body>

</html>


Moving ball in jQuery.