用JS剩余字數(shù)計算的代碼
更新時間：2008年07月03日 23:25:11 作者：
函數(shù)中首先給maxChars變量指定了值(輸入?yún)^(qū)內(nèi)最多可用的字符數(shù)，注意，該變量是個可用于計算的數(shù)值)
先看看HTML代碼：
<textarea name="description" onkeyup="checkLength(this);"></textarea>
<br /><small>文字最大長度: 250. 還剩: <span id="chLeft">250</span>.</small>
可以看出onkeyup是當用戶離開鍵盤后觸發(fā)的事件，傳遞的參數(shù)是this(也就是當前所在的文檔區(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ù)，注意，該變量是個可用于計算的數(shù)值)
然后從參數(shù)中得到在textarea中已輸入的字符長度，并與前面指定的最大長度做比較。
當輸入的字符長度超過范圍，則使用substring來強制限制其長度(0,maxChars)的意思就是可輸入范圍是0個字符到maxChars(變量)個字符。
var curr = maxChars - which.value.length;的作用是算出還可用多少個字符，將數(shù)值保存在curr中。
最后通過getElementById定位到id為chLeft的對象(在該HTML中為span)，并將curr里的值通過toString方法把數(shù)值變?yōu)樽址?，反饋到span標簽內(nèi)。
<textarea name="description" onkeyup="checkLength(this);"></textarea>
<br /><small>文字最大長度: 250. 還剩: <span id="chLeft">250</span>.</small>
可以看出onkeyup是當用戶離開鍵盤后觸發(fā)的事件，傳遞的參數(shù)是this(也就是當前所在的文檔區(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ù)，注意，該變量是個可用于計算的數(shù)值)
然后從參數(shù)中得到在textarea中已輸入的字符長度，并與前面指定的最大長度做比較。
當輸入的字符長度超過范圍，則使用substring來強制限制其長度(0,maxChars)的意思就是可輸入范圍是0個字符到maxChars(變量)個字符。
var curr = maxChars - which.value.length;的作用是算出還可用多少個字符，將數(shù)值保存在curr中。
最后通過getElementById定位到id為chLeft的對象(在該HTML中為span)，并將curr里的值通過toString方法把數(shù)值變?yōu)樽址?，反饋到span標簽內(nèi)。
相關(guān)文章
JavaScript通過極大極小值算法實現(xiàn)AI井字棋游戲
極小極大值搜索算法是一種零和算法，是用來最小化對手的利益，最大化自己的利益的算法。極小極大之搜索算法常用于棋類游戲等雙方較量的游戲和程序，算是一種電腦AI算法。本文將介紹通過這個算法實現(xiàn)的一個井字棋游戲，需要的可以參考一下2021-12-12
2009-07-07
JS中關(guān)于ES6?Module模塊化的跨域報錯問題解決
這篇文章主要介紹了JS中關(guān)于ES6?Module模塊化的跨域報錯,ES6模塊化提供了export命令和import?命令，對于模塊的導出和引入，本文結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了分享幾個JavaScript運算符的使用技巧，幫助大家更好的理解和學習使用JavaScript，感興趣的朋友可以了解下2021-04-04
DOM是針對XML和HTML文檔的一個API：即規(guī)定了實現(xiàn)文本節(jié)點操控的屬性、方法，具體實現(xiàn)由各自瀏覽器實現(xiàn)。2011-09-09
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)折線圖的示例代碼，文中通過示例代碼介紹的非常詳細，對大家學習或者使用小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
ES6在語言標準的層面上實現(xiàn)了模塊功能,而且實現(xiàn)的相當簡單,完全可以取代CommonJS和AMD規(guī)范,成為瀏覽器和服務(wù)器通用的模塊解決方案,下面這篇文章主要給大家介紹了關(guān)于ES6模塊導入和導出的方法,需要的朋友可以參考下2022-07-07
BootStrap.css 在手機端滑動時右側(cè)出現(xiàn)空白的原因及解決辦法
這篇文章主要介紹了BootStrap.css 在手機端滑動時右側(cè)出現(xiàn)空白的原因及解決辦法的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細介紹了Bootstrap基本組件學習筆記之進度條,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
一直對Js的作用域有點迷糊，今天偶然讀到Javascript權(quán)威指南，立馬被吸引住了，寫的真不錯。我看的是第六版本，相當?shù)暮?，大?000多頁，Js博大精深，要熟悉精通需要大毅力大功夫。謝謝心得吧2014-11-11