当用户离开文本框时隐藏链接按钮

Question

我的网页上有一个文本框和两个链接按钮。当我在文本框中添加一些值时，根据该值以及我离开文本框时的情况。我想隐藏或使链接按钮不可见。

<asp:textBox id="textBox1" runat="server"> 
<asp:linkButton id="link1" runat="server"> 
<asp:linkButton id="link2" runar="server"> 

当用户在文字框中输入值“X”，我想隐藏1和连接2否则，我想1和连接2可见。

这里是我的代码，它不工作：

function HidePick(selectObj) {  
     if (selectObj.value.toUpperCase() == "D9") { 
     document.getElementById("LINK1").style.display = 'none'; 
    } 
} 

    <td><asp:TextBox ID="TXTTest1" runat="server" CssClass="cssTest" Width="30" onmouseout="javascript:HidePick(this);" 

随着错误消息：

"JavaScript runtime error: Unable to get property 'style' of undefined or null reference

Answer 1

对于那种DOM操作，很容易与jQuery。

JS小提琴 - https://jsfiddle.net/p8pm6r5r

<asp:TextBox ID="textBox1" runat="server" /> 
<asp:LinkButton ID="link1" runat="server" Text="Button1" /> 
<asp:LinkButton ID="link2" runat="server" Text="Button2" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script type="text/javascript"> 

    $(function() { 
     $("#<%= textBox1.ClientID %>").blur(function() { 
      if ($(this).val() === "X") { 
       $("#<%= link1.ClientID %>").hide(); 
       $("#<%= link2.ClientID %>").hide(); 
      } 
     }); 
    }) 
</script> 

Answer 2

在asp.net的最终渲染ID可能会改变页面上，这样对JavaScript的需要使用控制的.ClientID ...你的代码必须是：

document.getElementById("<%=link1.ClientID%>").style.display = 'none'; 

相关：Accessing control client name and not ID in ASP.NET

Answer 3

<asp:textBox id="textBox1" runat="server"> 
<asp:LinkButton ID="link1" runat="server" Text="Button1" /> 
<asp:LinkButton ID="link2" runat="server" Text="Button2" /> 

Assum你不想使用jQuery或任何库;
在.aspx页面的htmls结尾添加一个脚本标记，以将按钮绑定到mouseleave或mouseout事件。只是为了确保你的textbox1的id是静态的（它在你的源代码中），一旦你的页面在浏览器上呈现，检查你的textbox1，看看它是否仍然有相同的id，如果不是，那么复制该id并替换（从textbox1到（whatever_textbox1））的事件绑定器行。您的链接ID也一样。

document.getElementById("textBox1").addEventListener("mouseout",HidePick,false); 
    function HidePick(e){ 
     if (e.target.value.toUpperCase() == "D9") 
      document.getElementById("LINK1").style.display = 'none';  
    }