Question

加载html页面时调用函数checkTweetLength。此函数用于更新textarea中键入的字符数。但是这个函数不会更新html页面，因为它只在页面加载期间运行一次。如何让这个函数动态更新html页面？

// JavaScript Document

window.onload = function(){
    checkTweetLength();
};

function checkTweetLength() {
    var tweet = document.getElementById("tweet_entered");
    if(tweet.value.length > 140) {
        //alert('Hey');
        document.getElementById("tweet_length").innerHTML = tweet.value.length - 140; 
    }else {
        //alert('else block');
        document.getElementById("tweet_length").innerHTML = tweet.value.length;
    }
}

Answer 1

使用<onchange>将其绑定到textarea。例如<textarea onchange=checkTweetLength(); >

（编辑）或使用onkeyup记录用户输入的更改...

Answer 2

document.getElementById("tweet_entered").onKeyUp = checkTweetLength;

Answer 3

您可以设置调用该函数的时间间隔。如下面的情况，你的功能将在3秒后被调用。

setTimeout(function(){checkTweetLength()}, 3000);

如果有任何活动（mousemove或keypress），你可以调用它

$(document).bind( "mousemove keypress", function () {
 checkTweetLength();
});

Answer 4

您需要将按键或更改事件绑定到文本区域。

这是一个有效的jsbin

    window.onload = function(){
    var tweet = document.getElementById("tweet_entered");
    tweet.onkeypress = checkTweetLength;
}
    function checkTweetLength() {
    if(this.value.length > 140) {
        console.log('Hey');
        document.getElementById("tweet_length").innerHTML =   140 - this.value.length; 
    }else {
        console.log('else block');
        document.getElementById("tweet_length").innerHTML = this.value.length;
    }
 }

现在，只要用户开始输入textarea，计数就会更新

希望它对你有用

如何让该函数动态更新html？

4 个答案: