用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-12JS中關(guān)于ES6?Module模塊化的跨域報錯問題解決
這篇文章主要介紹了JS中關(guān)于ES6?Module模塊化的跨域報錯,ES6模塊化提供了export命令和import?命令,對于模塊的導出和引入,本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-07-07BootStrap.css 在手機端滑動時右側(cè)出現(xiàn)空白的原因及解決辦法
這篇文章主要介紹了BootStrap.css 在手機端滑動時右側(cè)出現(xiàn)空白的原因及解決辦法的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-06-06