javascript文本框內(nèi)輸入文字倒計數(shù)的方法
更新時間：2015年02月24日 11:13:37 作者：代碼家園
這篇文章主要介紹了javascript文本框內(nèi)輸入文字倒計數(shù)的方法,涉及javascript針對鍵盤事件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了javascript文本框內(nèi)輸入文字倒計數(shù)的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>文本框內(nèi)輸入文字倒計數(shù)效果</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
maxLen = 100; //定義用戶可以輸入的最多字數(shù)
function checkMaxInput(obj) {
if (obj.value.length > maxLen){ //如果輸入的字數(shù)超過了限制
obj.value = obj.value.substring(0, maxLen); //就去掉多余的字
remLen.innerText = '您輸入的內(nèi)容超出了字數(shù)限制'
}
else{
remLen.innerText = '還剩下' + (maxLen - obj.value.length) + '字';//計算并顯示剩余字數(shù)
}
}
// End -->
</script>
</head>
<body>
<table border="1" width="40%" cellspacing="0" cellpadding="0" bordercolorlight="#000000" bgcolor="#808080" height="0">
<tr>
<td width="100%"><b><font color=ffffff>倒計數(shù)文本框</font></b></td>
</tr>
<tr>
<td width="100%" height="110">
<form name=tickform>
<p align="center">
<textarea name=msgbox rows=5 cols=31 onKeyDown="checkMaxInput(this)" onKeyUp="checkMaxInput(this)" style="background-color: #000000; color: #FFFFFF;overflow:auto"></textarea>
</p>
</td>
</tr>
</form>
<tr>
<td width="100%">
<font align="right" id=remLen><b></b></font>
</td>
</tr>
</table>
</body>
</html>
<head>
<title>文本框內(nèi)輸入文字倒計數(shù)效果</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
maxLen = 100; //定義用戶可以輸入的最多字數(shù)
function checkMaxInput(obj) {
if (obj.value.length > maxLen){ //如果輸入的字數(shù)超過了限制
obj.value = obj.value.substring(0, maxLen); //就去掉多余的字
remLen.innerText = '您輸入的內(nèi)容超出了字數(shù)限制'
}
else{
remLen.innerText = '還剩下' + (maxLen - obj.value.length) + '字';//計算并顯示剩余字數(shù)
}
}
// End -->
</script>
</head>
<body>
<table border="1" width="40%" cellspacing="0" cellpadding="0" bordercolorlight="#000000" bgcolor="#808080" height="0">
<tr>
<td width="100%"><b><font color=ffffff>倒計數(shù)文本框</font></b></td>
</tr>
<tr>
<td width="100%" height="110">
<form name=tickform>
<p align="center">
<textarea name=msgbox rows=5 cols=31 onKeyDown="checkMaxInput(this)" onKeyUp="checkMaxInput(this)" style="background-color: #000000; color: #FFFFFF;overflow:auto"></textarea>
</p>
</td>
</tr>
</form>
<tr>
<td width="100%">
<font align="right" id=remLen><b></b></font>
</td>
</tr>
</table>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
本文給大家匯總介紹了3種javascript實現(xiàn)動態(tài)顯示時間的方法及詳細示例，有需要的小伙伴可以參考下2018-07-07
這篇文章主要給大家介紹了關(guān)于Fetch超時設(shè)置與終止請求的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用Fetch具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要對比了js創(chuàng)建對象幾種方式的優(yōu)缺點，感興趣的小伙伴們可以參考一下2016-09-09
Next.js是一款React 開發(fā)框架，它可以幫助我們構(gòu)建 React 應(yīng)用程序。作為一個輕量級React服務(wù)端渲染應(yīng)用框架，這篇文章主要介紹了基于?Next.js實現(xiàn)在線Excel,需要的朋友可以參考下2022-08-08
JavaScript駕馭網(wǎng)頁－獲取網(wǎng)頁元素
這篇文章主要介紹了JavaScript駕馭網(wǎng)頁－獲取網(wǎng)頁元素的相關(guān)資料,需要的朋友可以參考下2016-03-03
表單問題，是個糾結(jié)的問題，有時候程序又要前端去處理，那要看你的后臺搭檔怎么樣了，接下來一起探討表單驗證吧2013-03-03
javascript 中null和undefined區(qū)分和比較
這篇文章主要介紹了javascript 中null和undefined區(qū)分和比較的相關(guān)資料,需要的朋友可以參考下2017-04-04
下面小編就為大家?guī)硪黄僯s實現(xiàn)畫一棵樹的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
js提交form表單,并傳遞參數(shù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s提交form表單,并傳遞參數(shù)的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
js當(dāng)一個變量為函數(shù)時 應(yīng)該注意的一點細節(jié)小結(jié)
變量testFun為一個匿名函數(shù)，匿名函數(shù)返回的一個testFun.init對象（也是一個匿名函數(shù)）2011-12-12