當上一個文本框包含文本時，如何使文本框可見

Question

我有一個WebForm，其中需要放置約30個文本框，主要用於輸入條形碼掃描的數據。 我僅使第一個文本框可見，並且我希望只有當前一個文本框填充了某些文本時，下一個文本框才可見。 我也嘗試在選定更改的文本框中使用“如果”條件，但它不起作用。 有什么辦法嗎？

Answer 1

您可以通過Jquery解決您的問題。 我有一個示例代碼，其中我有四個Textbox。 最初，在Web窗體中只有第一個文本框可見，當用戶在第一個TextBox中輸入一些值時，如果Previous textbox具有值（如果下一個textbox不可見），則自動顯示next 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();
}
});

我已經做了相同的示例應用程序，請單擊給定鏈接進行演示

請參閱演示應用程序

它是在客戶端代碼上，因此它的性能比服務器端要快。

如果您認為您的問題已被我的想法解決，請投票給我。

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腳本，因為如果您要為此使用服務器端功能，那么它將由此進入服務器很多次，因此您的應用程序性能也會降低。

因此，創建一個將接受一個參數的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。 因此，為所有文本框設置樣式style =“ display：none”

Answer 4

使用可以在第一個文本框中使用Keydown事件

Answer 5

試試這個代碼

最初設置標志= 1，因為默認情況下第一個文本框將可見

私有無效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>