Question

我有一个WebForm，其中我需要放置大约30个文本框，主要是输入条形码扫描数据。我只显示第一个文本框，我希望只有当前一个文本框中填充了一些文本时，下一个文本框才可见。我尝试在所选更改的文本框中使用“If”条件，但它不起作用。任何解决方案？

Answer 1

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

示例代码如下：

<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();
}
});

我已经为此做了样本申请，请点击Demo的给定链接

See Demo application

它位于客户端代码，因此其性能如此之快，而不是服务器端。

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

Answer 2

我将这些文本框命名为“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 3

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

所以创建一个接受一个参数的java脚本函数。此参数将采用下一个文本框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>

注意： - 如果您将从textbox属性中执行visible = false，那么我们无法从javascript中执行visible = true。因此，为所有文本框样式设置样式=“display：none”

Answer 4

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

Answer 5

试试这段代码

最初设置flag = 1，因为第一个文本框将默认为可见

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 6

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>

如何在上一个文本框包含文本时使文本框可见

6 个答案: