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.