Javascript 到空白文本框值不起作用，但 jquery 可以

Question

我在页面中有一个更新面板，供用户指定活动的“所有者”。该所有者将是我们活动目录中的用户。该面板允许用户输入一些文本，然后单击搜索按钮以在我们的 Active Directory 中查找匹配的用户。当用户从匹配列表中选择用户时，会填充所有者的姓名和用户名。用户名是隐藏的，因为用户不需要看到它。一切正常

我的问题是我有一个事件处理程序，每当所有者名称的文本发生更改时都会触发，如果用户更改所有者名称，我想将所有者用户名设为空白，直到用户实际调出匹配列表并选择一个有效的进入。

我的问题是，当我尝试使用 Javascript 访问隐藏文本框的值时，我不能，但是当我尝试 jquery 等效代码时，它工作得很好。为什么？

这是我的 HTML

<asp:UpdatePanel ID="OwnerUpdatePanel" runat="server" UpdateMode="Conditional" ClientIDMode="Static">
    <ContentTemplate>
        <asp:TextBox id="OwnerNameTextbox" runat="server" class="form-control input-sm" Width="200"/>
        <asp:TextBox id="OwnerUsernameTextbox" runat="server" class="hidden"/>
        <asp:LinkButton class="btn btn-default btn-sm StopClickPropagation" id="GetOwners" AutoPostBack="True" runat="server" OnClientClick="CheckLength()" OnClick="GetMatchingOwners">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        </asp:LinkButton>
        <asp:ListBox id="OwnersList" runat="server" AutoPostBack="True" class="dropdown-list" onblur='$(".dropdown-list").hide();' OnSelectedIndexChanged="OwnerSelectionChanged">
        </asp:ListBox>
        <p>
    </ContentTemplate>
</asp:UpdatePanel>

这是我的所有者名称文本框更改事件的处理程序

    function OwnerNameTextChanged() {
        document.getElementById("OwnerUpdatePanel").childNodes[1].value = "";
    }

这会将我的 OwnerNameTextBox 设置为空白，这不是我想要的。我想将 OwnerUsernameTextbox 设置为空白。但是当我将 childNodes 的下标更改为 2 时，什么都没有改变（检查 childNodes[2] 的值并发出警报，给我“未定义”）。但如果我尝试使用 jquery：

$("#OwnerUpdatePanel").children(":nth-child(2)").val("");

效果很好。为什么 jquery 子选择可以工作，而 javascript 却不行？

Answer 1

由于textNode也是childNode，你需要尝试一下

document.getElementById("OwnerUpdatePanel").childNodes[3].value = "";

<div id="OwnerUpdatePanel">      
  <input type="text" id="OwnerNameTextbox" value="name">
  <input type="text" id="OwnerUsernameTextbox" value="user">
</div>

去掉标签之间的间距（去掉一个子节点）

document.getElementById("OwnerUpdatePanel").childNodes[2].value = "";

<div id="OwnerUpdatePanel">      
  <input type="text" id="OwnerNameTextbox" value="name"><input type="text" id="OwnerUsernameTextbox" value="user">
</div>

来自documentation - childNodes 还包括例如文本节点和 cmets。要跳过它们，请使用children

document.getElementById("OwnerUpdatePanel").children[1].value = "";

    <div id="OwnerUpdatePanel">      
      <input type="text" id="OwnerNameTextbox" value="name">
      <input type="text" id="OwnerUsernameTextbox" value="user">
    </div>