Ausblenden der Verknüpfungsschaltflächen, wenn Benutzer das Textfeld verlässt

Question

Ich habe ein Textfeld und zwei Verknüpfungsschaltflächen auf meiner Webseite. Wenn ich Wert auf das Textfeld setze, basierend auf diesem Wert und auch, sobald ich das Textfeld verlasse. Ich möchte den Link-Button unsichtbar machen oder ausblenden.

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

, wenn der Benutzer Wert „X“ in das Textfeld eingeben, möchte ich Link1 und Link2 verstecken sonst will ich Link1 und Link2 sichtbar sein.

hier ist mein Code und es funktioniert nicht:

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);" 

mit Fehlermeldung:

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

Answer 1

Für diese Art von DOM-Manipulation, es ist einfach, mit jQuery.

JS Fiddle - 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

In asp.net die endgültige machen ID auf Seite ändern können, so Javascript Sie die .ClientID Kontrolle verwenden müssen ... Sie Code müssen sein:

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

Verwandte: 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 Sie möchten nicht jQuery oder eine Bibliothek verwenden.
Fügen Sie am Ende Ihrer htmls in .aspx-Seite ein Skript-Tag hinzu, um die Schaltfläche an mouseleave oder mouseout Ereignisse zu binden. Um sicherzustellen, dass die ID Ihrer Textbox1 statisch ist (so wie es in Ihrer Quelle ist), prüfen Sie nach dem Rendern Ihrer Seite im Browser nach Ihrer Textbox1 und sehen Sie, ob sie dieselbe ID hat. Wenn nicht, kopieren Sie diese ID und ersetzen Sie sie in der unter Event-Mappe Zeile von Javascript-Code von Textbox1 zu (whatever_textbox1). Gleicher Schritt für Ihre Link-IDs.

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