用JS剩余字?jǐn)?shù)計(jì)算的代碼
<textarea name="description" onkeyup="checkLength(this);"></textarea>
<br /><small>文字最大長(zhǎng)度: 250. 還剩: <span id="chLeft">250</span>.</small>
可以看出onkeyup是當(dāng)用戶(hù)離開(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)。
相關(guān)文章
JavaScript通過(guò)極大極小值算法實(shí)現(xiàn)AI井字棋游戲
極小極大值搜索算法是一種零和算法,是用來(lái)最小化對(duì)手的利益,最大化自己的利益的算法。極小極大之搜索算法常用于棋類(lèi)游戲等雙方較量的游戲和程序,算是一種電腦AI算法。本文將介紹通過(guò)這個(gè)算法實(shí)現(xiàn)的一個(gè)井字棋游戲,需要的可以參考一下2021-12-12javascript 解析后的xml對(duì)象的讀取方法細(xì)解
2009-07-07JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò)問(wèn)題解決
這篇文章主要介紹了JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò),ES6模塊化提供了export命令和import?命令,對(duì)于模塊的導(dǎo)出和引入,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07分享幾個(gè)JavaScript運(yùn)算符的使用技巧
這篇文章主要介紹了分享幾個(gè)JavaScript運(yùn)算符的使用技巧,幫助大家更好的理解和學(xué)習(xí)使用JavaScript,感興趣的朋友可以了解下2021-04-04JavaScript高級(jí)程序設(shè)計(jì) DOM學(xué)習(xí)筆記
DOM是針對(duì)XML和HTML文檔的一個(gè)API:即規(guī)定了實(shí)現(xiàn)文本節(jié)點(diǎn)操控的屬性、方法,具體實(shí)現(xiàn)由各自瀏覽器實(shí)現(xiàn)。2011-09-09微信小程序?qū)崿F(xiàn)折線(xiàn)圖的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)折線(xiàn)圖的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06JavaScript?ES6模塊導(dǎo)入和導(dǎo)出的方法
ES6在語(yǔ)言標(biāo)準(zhǔn)的層面上實(shí)現(xiàn)了模塊功能,而且實(shí)現(xiàn)的相當(dāng)簡(jiǎn)單,完全可以取代CommonJS和AMD規(guī)范,成為瀏覽器和服務(wù)器通用的模塊解決方案,下面這篇文章主要給大家介紹了關(guān)于ES6模塊導(dǎo)入和導(dǎo)出的方法,需要的朋友可以參考下2022-07-07BootStrap.css 在手機(jī)端滑動(dòng)時(shí)右側(cè)出現(xiàn)空白的原因及解決辦法
這篇文章主要介紹了BootStrap.css 在手機(jī)端滑動(dòng)時(shí)右側(cè)出現(xiàn)空白的原因及解決辦法的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06Bootstrap基本組件學(xué)習(xí)筆記之進(jìn)度條(15)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之進(jìn)度條,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12