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