javascript文本字段計數器顯示負載以及鍵盤上顯示

Question

經過一個非常有效和有益的迴應我的問題在這裏：javascript text field counter display我沒有一個額外的問題。代碼（如下所示）奇妙地工作，但它只在按鍵後顯示。我如何調整它，以便它不僅在按鍵上更新，而且在頁面加載後顯示，以便用戶可以在焦點位於字段和類型之前看到字符數量？通常（但不是總是）會在先前會話中保存的文本字段中存在文本，因此它們需要從那裏取回。

使用代碼當前：

$(window).load(function() { 
    $("#input_4_1").keyup(function() { 
     var diff = (2550 - $(this).val().length); 
     if (diff >= 501) { 
      $("#count_4_1").html("<span style=\"color: #55a500;\">Characters remaining: " + diff + "</span>"); 
     } else if ((diff <= 500) && (diff >= 101)) { 
      $("#count_4_1").html("<span style=\"color: #ff6600;\">Characters remaining: " + diff + "</span>"); 
     } else if (diff <= 100) { 
      $("#count_4_1").html("<span style=\"color: #ff0000;\">Characters remaining: " + diff + "</span>"); 
     } 
    }); 
}); 

謝謝！

Answer 1

你只需要打破這個功能，並在每次按鍵時調用onLoad。

$(window).load(function() { 
    var countChars = function(elm) { 
     var diff = (2550 - $(elm).val().length); 
     if (diff >= 501) { 
      $("#count_4_1").html("<span style=\"color: #55a500;\">Characters remaining: " + diff + "</span>"); 
     } else if ((diff <= 500) && (diff >= 101)) { 
      $("#count_4_1").html("<span style=\"color: #ff6600;\">Characters remaining: " + diff + "</span>"); 
     } else if (diff <= 100) { 
      $("#count_4_1").html("<span style=\"color: #ff0000;\">Characters remaining: " + diff + "</span>"); 
     } 
    }; 

    countChars("#input_4_1"); 
    $("#input_4_1").keyup(function() { countChars(this) });   
}); 

但我可能會建議重構的代碼位：

$(window).load(function() { 
    var countChars = function(elm, counter) { 
     var diff = (2550 - $(elm).val().length), 
      color = 'ff0000'; 

     if (diff > 500) { 
      color = '55a500'; 
     } else if (diff > 100) { 
      color = 'ff6600'; 
     } 

     $(counter).html('<span style="color: #' + color + ';">Characters remaining: ' + diff + '</span>'); 
    }; 

    countChars('#input_4_1','#count_4_1'); 
    $("#input_4_1").keyup(function() { countChars(this, '#count_4_1') }); 
});