当另一个更改时，使用javascript函数更新一个文本框

Question

我有一个javascript函数，可以计算2个不同文本框中的字符，并将值放在第三个文本框中。

这是功能如下：

function CountChars() {
             var subjectLength = document.getElementById("txtBoxSubject").value.length;
             var msgLength = document.getElementById("txtBoxMsg").value.length;
             document.getElementById("txtBoxCnt").value = subjectLength + msgLength;
         }

我使用“ onkeyup”从“消息”文本框中调用它，并且工作正常。

<asp:TextBox ID="txtBoxMsg" runat="server" ClientIDMode="Static" 
              TextMode="MultiLine" onkeyup="CountChars()"></asp:TextBox>

可以使用下拉列表或用户向其中添加文本来更改主题文本框。 因此，使用“ onkeyup”将不适用于“主题”文本框。 我尝试使用“ onchange”，但在“计数”文本框中未输入任何内容。

这是主题html：

 <asp:TextBox ID="txtBoxSubject" runat="server" ClientIDMode="Static" onchange="CountChars()"></asp:TextBox>

我究竟做错了什么？

每当主题文本框中的文本更改时，如何调用javascript函数？

谢谢。

UPDATE这是“主题”下拉列表，它是更改时调用的函数。

 <asp:DropDownList ID="ddListSubject" runat="server" ClientIDMode="Static" AutoPostBack="true" onchange="SubjectChanged();">
        </asp:DropDownList>

function SubjectChanged() {
        var strSubject = document.getElementById("ddListSubject").value;
        if (strSubject == "Custom") {
            document.getElementById("txtBoxSubject").value = "";
            document.getElementById("txtBoxSubject").focus();
         }
        else {
            document.getElementById("txtBoxSubject").value = strSubject;
        }
        CountChars(); //number appears for a second then disappears
     }

Answer 1

似乎您没有用半列终止函数。 使用类似onkeyup =“ CountChars（）;”的东西

Answer 2

您的.aspx使用的是MasterPage吗？ Asp.Net对象的名称在呈现的页面中更改。 尝试使用<％=％Objeto.ClientID>。

function CountChars() {
         var subjectLength = document.getElementById("<%=txtBoxSubject.ClientID %>").value.length;
         var msgLength = document.getElementById("<%= txtBoxMsg.ClientID %>").value.length;
         document.getElementById("<%= txtBoxCnt.ClientID %>").value = subjectLength + msgLength;
     }

或者也许使用JQuery。 查看下面的代码，按您描述的方式工作。

Subject:
<input id="text1" type="text" />
<br />
Msg
<input id="text2" type="text" multiple style="height: 100px" />
<br />
Total: <span id="total">0</span>

<script type="text/javascript">
    $(document).ready(function () {
        $("input[type=text]").keyup(function () {
            var total = 0;
            $("input[type=text]").each(function () {
                total += $(this).val().length;
            });
            $("#total").html(total);
        });
    });
</script>

希望这对您有帮助

Answer 3

假我...我从下拉列表中删除了AutoPostBack =“ true”！ 感谢您所有的帮助！！