联编辑控制 [英] 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 of 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"/>

客户端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>

这篇关于联编辑控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！