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 还包括例如文本节点和注释。要跳过它们，请使用 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>