计算弹出文本框中的字符

时间:2015-09-24 16:39:50

标签: javascript asp.net popup modalpopupextender

我需要做的是让其中一个字符计数器让用户知道他们可以在文本框中输入多少个字符。

显然,诀窍在于文本框位于弹出框中。

我尝试实现找到here的代码,但它似乎没有起作用。没有错误或任何东西,只是留下的字符数量永远不会改变,我可以输入超出假设的限制。

我拥有的是:

<!--//**********************************
    // Comment Character Count
    //**********************************  -->
<script type="text/javascript">
     function textCounter(field, countfield, maxlimit) {
     if (field.value.length > maxlimit)
        field.value = field.value.substring(0, maxlimit);
     else
        countfield.value = maxlimit - field.value.length;
     }
 </script>

然后在我的代码体中,我有这个:

    <asp:Panel ID="pnl" runat="server" Height="190px" BackColor="#0f6fc6" ScrollBars="Auto">
        <asp:TreeView ID="TreeView1" runat="server" ShowLines="true" PopulateNodesFromClient="false" OnSelectedNodeChanged="TreeView1_PopupCommentsBox" Height="118px" ShowExpandCollapse="true" Font-Size="X-Small" Width="295px" NodeIndent="10" Font-Bold="True" ForeColor="White" ExpandDepth="0"></asp:TreeView>   
        <asp:TextBox ID="txtTreeselect" runat="server" Enabled="False" Visible="False"></asp:TextBox></asp:Panel>
<!--  ************************************  -->
            <asp:modalpopupextender id="MdlCommentsExtender" runat="server"     
                targetcontrolid="TreeView1" popupcontrolid="pnlComments" 
                popupdraghandlecontrolid="PopupHeader" drag="True" 
                backgroundcssclass="ModalPopupBG" Enabled="False"  >
            </asp:modalpopupextender>

            <asp:panel id="pnlComments" style="display: none" runat="server" BackColor="White" CssClass="modalPopup">
                <div class="HellowWorldPopup">
                    <div class="PopupHeader" id="Div3" style="border: thin solid #000000; vertical-align: middle; text-align: center; background-color: #C0C0C0; color: #000000; font-weight: bold; height: 40px;" ><br />Pend Comment</div>
                        <div class="PopupBody" style="background-color: #FFFFFF">
                            <table style="width: 300px">
                                <tr style="text-align:left">
                                    <td style="padding:4px"><asp:Label ID="lblCommentBox" runat="server" Text="Comment:"></asp:Label></td>
                                </tr>
                                <tr>
                                    <td style="padding:4px">
                                   <!--     <asp:TextBox ID="txtCommentBox_Old" runat="server" CssClass="textbox" TextMode="multiline" Wrap="True" Height="70px" Width="270px" Font-Size="Small"></asp:TextBox>  -->
                                        <asp:TextBox ID="txtCommentBox" TextMode="MultiLine" CssClass="textbox" Wrap="True" Height="70px" Width="270px" Font-Size="Small" Rows="3" runat="server" onkeyup="textCounter(txtCommentBox, this.form.remLen, 50);" onkeydown="textCounter(txtCommentBox, this.form.remLen, 50);" />
                                    </td>
                                </tr>  
                                <tr>
                                    <td>
                                        <input readonly="readonly" type="text" id="remLen" name="remLen" size="2" maxlength="3" value="50" /> characters left
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="Controls">
                            <table style="width: 300px">
                                <tr>
                                   <td style="vertical-align: middle; text-align: center"> <asp:Button ID="mdlCmntsOk_Click" runat="server" Text="OK" CssClass="textbox" Height="28px" Width="75px" OnClick="mdlCommentsOk_Click" /></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>  
            </asp:panel>
<!--  ************************************  -->

谁能告诉我可能出现的问题?这不起作用,因为它在modalpopupextender里面吗?

1 个答案:

答案 0 :(得分:1)

将事件属性更改为:

onkeyup="textCounter( this, this.form.remLen, 50);" 
onkeydown="textCounter( this, this.form.remLen, 50);"

您使用的是在该范围内没有值的变量名称。事件属性中的this始终引用拥有节点。如果您已经在JavaScript中全局定义了txtCommentBox(在头部或文档中),那么它就可以在那里使用。