c# - 当上一个文本框包含文本时如何使文本框可见

Question

我有一个 WebForm，我需要在其中放置大约 30 个文本框，主要用于输入条形码扫描数据。我只使第一个文本框可见，并且我希望下一个文本框仅在前一个文本框填充了一些文本时才可见。我也尝试在选定更改的文本框中使用“如果”条件，但它不起作用。有什么解决办法吗？

Answer 1

您应该为此使用 java-script，因为如果您为此使用服务器端功能，那么它将多次访问服务器，您的应用程序性能也会降低。

因此，创建一个接受一个参数的 java-script 函数。此参数将采用下一个文本框 id（您要显示的文本框）。像这样调用这个javascript函数：- onkeyup="calgrid(this,"TextBox2");" 通过 nexttextbox id 代替 TextBox2 ...

<script type="text/javascript" language="javascript">

 function calgrid(firsttextbox,nexttextbox)
{

    var id=firsttextbox.id;
    var lastindex= id.lastIndexOf("_");
    var strclnt=id.slice(0,lastindex+1);
    var txtboxvalue=document.getElementById(firsttextbox).value;
if(txtboxvalue!="")
{
      document.getElementById(strclnt+nexttextbox).style.visibility='visible';
}
else
{
  document.getElementById(strclnt+nexttextbox).style.display = "none";
}


}
</script>

注意：- 如果您将从文本框属性中执行 visible=false，那么我们不能从 javascript 中执行 visible=true。所以为所有文本框设置样式 style="display:none"

Answer 2

您可以通过 Jquery 解决您的问题。我已经制作了一个示例代码，其中我有四个文本框。最初只有第一个文本框在 Web 表单中可见，当用户在第一个文本框中输入一些值时，如果上一个文本框有值，如果下一个文本框不可见，则自动显示下一个文本框。

示例代码如下：

<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />

$('input:text:not(:eq(0))').hide()
$('input').on("change paste keyup", function () {
    if ($(this).val().length > 0) {
       $(this).next().show();
    }
else
{
    $(this).next().hide();
}
});

我已经制作了相同的示例应用程序，请单击给定的演示链接

查看演示应用程序

它在客户端代码中，因此它的性能如此之快，而不是服务器端。

如果您觉得我的想法解决了您的问题，请投票给我。

Answer 3

我会将这些文本框命名为“textbox1”、“textbox2”、“textbox3”，这样您就可以轻松找到当前文本框的索引。然后您可以使用 KeyDown 事件来控制将显示的内容和不显示的内容。这不是一个有效的例子，但它应该给你一个很好的方向。

        int currentIndex = 1;

        private void TextBox1_KeyDown(object sender, KeyEventArgs e)
        {
            TextBox t = Controls["TextBox" + (currentIndex + 1).ToString()] as TextBox;
            t.Visible = true;
            currentIndex +=1;
        }

Answer 4

try this code

initially set flag=1 as first textbox is going to be by default visible

private void visibleTextBox(Control c) { int flag = 1;

        foreach (Control c1 in c.Controls)
        {
            if (c1.GetType() == typeof(TextBox))
            {
                if (flag == 1)
                {
                    ((TextBox)c1).Visible = true;
                }
                else
                {
                    ((TextBox)c1).Visible = false;
                }

                if (((TextBox)c1).Text != "")
                {
                    flag = 1;
                }
                else
                {
                    flag = 0;
                }
            }
        }
    }

Answer 5

JavaScript 中比较简单的解决方案。代码应该是这样的。

在文本框上定义onchange事件，如下所示：

    <asp:TextBox ID="txt1" runat="server" onchange="show('txt1', 'txt2');"></asp:TextBox>
    <asp:TextBox ID="txt2" runat="server" onchange="show('txt2', 'txt3');" Style="visibility: hidden;"></asp:TextBox>

然后使用此 JavaScript 代码有条件地显示下一个 TextBox。将此代码放在页面的head标签中：

<script type="text/javascript">
    function show(txtCurrent, txtNext) {

        var valueCurrent = document.getElementById(txtCurrent).value;
        //alert(valueCurrent);

        if (valueCurrent.length > 0) {
            document.getElementById(txtNext).style.visibility = 'visible';
        }
        else {
            document.getElementById(txtNext).style.visibility = 'hidden';
        }

    }
</script>

Answer 6

使用可以在您的第一个文本框中使用Keydown事件