我正在尝试制作一个带有计数器的文本框,以显示您还剩下多少个标志(纯粹出于用户界面的目的,而不是实际的验证目的).

我尝试使用此代码：

function checkRemainingChars () {

    var maxChars = 500;
    var text = document.getElementById('textArea').value;
    console.log(text);
    var usedChars = text.length;
    var remainingChars = maxChars - usedChars;
    var message = "<p>" + remainingChars + "out of " + maxChars + " characters remaining </p>";
    console.log(message);
    $('#remaining').append(message);
}


$(document).ready( function () {

    $('#textArea').on('change',checkRemainingChars());

});

其中#textArea是用户放置其文本的文本区域,而#remaining是该消息的旁注,表示他还剩下多少符号.

仅在页面加载/刷新时有效.然后我尝试添加一些简单的方法,以消除代码中可能出现的错误：

$(document).ready( function () {

    $('#textArea').on("change",alert(1));

});

但是即使在这里,我也只有在刷新页面时才会收到警报.用户键入内容后,我该怎么做才能使文本更新？

解决方法:

您正在调用该方法,并将其返回的内容分配给事件侦听器,而不是对该方法分配引用.

$('#textArea').on('change',checkRemainingChars()); 
                                              ^^

放下()

$('#textArea').on('change', checkRemainingChars);

如果需要在页面加载时运行的方法,则可以触发change事件.

$('#textArea').on('change', checkRemainingChars).trigger("change");

或者您可以直接致电更改.

最后,您将消息添加到元素以获取剩余的内容.我认为您不需要追加,您可能想使用

$('#remaining').html(message);