当另一个文本框包含 asp.net 中的文本时，如何使文本框仅可见？

Question

我正在 Microsoft Visual Studio 2017 中创建一个 asp.net 表单。我有一个 Street1 的文本框，如果用户在 Street1 中输入内容，我只希望 Street2 出现一个文本框。 我将如何在 Javascript 中完成此操作？ 或者如果在 C# 中有更好的方法来完成，我该怎么做？

这是我的 HTML 代码：

        <div class="col">
            <asp:TextBox ID="Street1" class="form-control" placeholder="Street1" runat="server"></asp:TextBox>
        </div>

        <div class="col">
            <asp:TextBox ID="Street2" class="form-control" placeholder="Street2" runat="server"></asp:TextBox>
        </div>

这是我的 Javascript：

<script>
    var Street1 = document.getElementById('<%= Street1.ClientID %>');
    var Street2 = document.getElementById('<%= Street2.ClientID %>');

    Street1.Value.addEventListener('input', function () {
        var Street1 = document.getElementById('<%= Street1.ClientID %>');
        var Street2 = document.getElementById('<%= Street2.ClientID %>');
        if (Street1.Value != "") {
            Street2.style.display = "block";
        }
        else {
            Street2.style.display = "none";
        }
    });
</script>

尽管 Street1 文本框是空的，但 Street2 在我的代码中仍然可见。

Answer 1

你快到了......我对你的代码没有太大的改变，只是几点。 使用 javascript element.value而不是 ASP.NET object.Value （注意小写 v 用于 javascript）。

它仍然显示的原因是页面加载时没有应用 css。 添加简单的 css 以在页面加载时隐藏Street2文本框： #Street2 { display: none; } #Street2 { display: none; } 。

下面的代码片段显示了它可以进行微小的更改。

 var Street1 = document.getElementById('Street1'); var Street2 = document.getElementById('Street2'); Street1.addEventListener('input', function () { // already have a reference to Street1 and Street2 from above, no need to declare again // use javascript value not asp.net Value (lowercase 'v') if (Street1.value) { Street2.style.display = "block"; } else { Street2.style.display = "none"; } });

 #Street2 { display: none; }

 <div class="col"> <input type="text" ID="Street1" class="form-control" placeholder="Street1" runat="server"/> </div> <div class="col"> <input type="text" ID="Street2" class="form-control" placeholder="Street2" runat="server"/> </div>