javascript - 计算弹出文本框中的字符数

Question

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

显然，诀窍在于文本框位于弹出框上。

我尝试实现发现的代码 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 内部而不起作用吗？

Answer 1

将事件属性更改为:

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

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