用JS剩余字數計算的代碼

2019-11-21 01:42:13

字體：大中小

來源：轉載

供稿：網友

先看看HTML代碼：

<textarea name="description" onkeyup="checkLength(this);"></textarea>
<br /><small>文字最大長度: 250. 還剩: <span id="chLeft">250</span>.</small>
可以看出onkeyup是當用戶離開鍵盤后觸發的事件，傳遞的參數是this(也就是當前所在的文檔區域)

然后結合JS代碼看一下：

<script type="text/javascript">
function checkLength(which) {
var maxChars = 250;
if (which.value.length > maxChars)
which.value = which.value.substring(0,maxChars);
var curr = maxChars - which.value.length;
document.getElementById("chLeft").innerHTML = curr.toString();
}
</script>
函數中首先給maxChars變量指定了值(輸入區內最多可用的字符數，注意，該變量是個可用于計算的數值)

然后從參數中得到在textarea中已輸入的字符長度，并與前面指定的最大長度做比較。
當輸入的字符長度超過范圍，則使用substring來強制限制其長度(0,maxChars)的意思就是可輸入范圍是0個字符到maxChars(變量)個字符。

var curr = maxChars - which.value.length;的作用是算出還可用多少個字符，將數值保存在curr中。

最后通過getElementById定位到id為chLeft的對象(在該HTML中為span)，并將curr里的值通過toString方法把數值變為字符串，反饋到span標簽內。

上一篇：javascript 火狐(firefox)不顯示本地圖片問題解決

下一篇：javascript indexOf函數使用說明