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.

<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.

Next Recommended Reading Get and Set Value of Label using JQuery