先看看HTML代碼：

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

然后結(jié)合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>
函數(shù)中首先給maxChars變量指定了值(輸入?yún)^(qū)內(nèi)最多可用的字符數(shù)，注意，該變量是個(gè)可用于計(jì)算的數(shù)值)

然后從參數(shù)中得到在textarea中已輸入的字符長(zhǎng)度，并與前面指定的最大長(zhǎng)度做比較。
當(dāng)輸入的字符長(zhǎng)度超過(guò)范圍，則使用substring來(lái)強(qiáng)制限制其長(zhǎng)度(0,maxChars)的意思就是可輸入范圍是0個(gè)字符到maxChars(變量)個(gè)字符。

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

最后通過(guò)getElementById定位到id為chLeft的對(duì)象(在該HTML中為span)，并將curr里的值通過(guò)toString方法把數(shù)值變?yōu)樽址?，反饋到span標(biāo)簽內(nèi)。

最新評(píng)論