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（注意javascript的小写字母v）。

它仍然显示的原因是页面加载时没有应用CSS。添加简单的CSS即可在页面加载时Street2最初隐藏#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>

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

1 个答案: