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.
Moving ball in jquery
Moving ball in jquery
<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>
No comments:
Post a Comment