Question

我有一个文本框，用户在其中输入一个数字。我希望在用户在文本框中输入大于1的值时显示一个新面板，但在数字为1时隐藏它。我在javascript中使用Onkeyup功能并且尝试onblur它不起作用。

这是我获得价值的部分。

<tr>
    <td class="ColWidth">
        <span class="red" style="color: #FF0000; font-weight: bold;"></span>
        <asp:Label ID="lblUnitsAffedted" runat="server" 
             Text="Total number of untis affected: ">
        </asp:Label>
    </td>
    <td class="InputCallWidth">
        <asp:TextBox ID="txtUnitsAffected" runat="server" Height="25px" Width="256px" 
              onkeyup="getUnitsAffected();">
        </asp:TextBox>           
    </td>
</tr>

当单位数大于1时，这是我要显示的部分：

<tr>
    <td colspan="4">
        <div id="divUnitsAffected" runat="server" visible="true">
            <table width="100%" border="0" cellspacing="0" class="tbl">
                <tr>
                    <td colspan="3" style="color:black;">
                        <h4>
                            please provide Names & Unit numbers
                        </h4>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>

这是我的Java Script方法。

<script language="javascript" type="text/javascript">

     function getUnitsAffected() {
         //Get the Textbox control
         var UnitsAffected = document.getElementById("<%=txtUnitsAffected.ClientID %>");
         var DivUnitsAffected = document.getElementById('DivUnitsAffected');

         if (UnitsAffected.value > 1){
             DivUnitsAffected.style.display = "block";
         }
         else {
             DivUnitsAffected.style.display = "none";
         }
     }
</script>

Answer 1

使用onblur或focusout事件代替onKeyUp事件。然后你可以获取＆amp;检查输入控件的值，并根据您可以设置面板可见性的值。

此外，您可以使用parseFloat（）JavaScript函数获取输入值的小数形式，然后检查条件，是否小于或等于1或大于1。

Answer 2

尝试以下代码

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

  <table>
   <tbody>
       <tr>
           <td>
               <asp:TextBox ID="txtUnitsAffected" runat="server" Height="25px" Width="256px" 
          onblur="getUnitsAffected(this);">
    </asp:TextBox>
           </td>
       </tr>
       <tr>
           <td>
               <div id="divUnitsAffected">
                   Testing
               </div>
           </td>
       </tr>
   </tbody>
</table>

   <script type="text/javascript">
       function getUnitsAffected(txtbx)
       {
           var num = parseInt(txtbx.value);
           var div = document.getElementById('divUnitsAffected');

           if(num > 1)
           {
               div.style.display = "block";
           }
           else
           {
               div.style.display = "none";
           }
       }
   </script>
</asp:Content>

如何使用javascrpt基于文本框输入显示或隐藏面板？

2 个答案: