inline edit control

The label is initialized with the value of the textbox. Upon clicking the label, the textbox is shown. The user can then edit the contents of the textbox. Upon blurring focus, the textbox is hidden and the label shown. Should the user delete the contents o开发者_Go百科f the textbox or only enter whitespace into the textbox, the textbox is not hidden, thus avoiding showing a label with no text. Is there a way to do this ?

Untested, but the general idea should help you out.

HTML:

<asp:TextBox ID="txtA" onblur="txtBlur();" style="display:none;" runat="server"/>
<asp:Label ID="txtA" onclick="txtFocus();" runat="server"/>

Client-side JS:

    <script>
    var txtA = document.getElementById("<%# txtA.ClientID %>");
    var lblA = document.getElementById("<%# lblA.ClientID %>");

    function txtBlur()
    {
        if (txtA.value.trim() != '')
        {
            lblA.innerText = txtA.value;

            lblA.style.display = 'inline';
            txtA.style.display = 'none';
        }
    }

    function txtFocus()
    {
        txtA.value = lblA.innerText;

        lblA.style.display = 'none';
        txtA.style.display = 'inline';
    }
    </script>

Check for js validation that textbox is not empty

function Validate()
{
    if(document.getElementById("txta").value=="")
    {
        alert('Please enter the value');
        document.getElementById("txta").focus();
        return false;
    }
}

or you can server side

if (txa.text ="")
{
Response.Write('Text box cannot be empty');
}