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)文章
這篇文章主要為大家詳細介紹了js實現(xiàn)二級聯(lián)動簡單實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
文檔對象模型DOM（Document Object Module）定義了用戶操作文檔對象的接口，它使得用戶對HTML有了空前的訪問能力，并使開發(fā)者能將HTML作為XML文檔來處理。2009-12-12
JS實現(xiàn)iframe中子父頁面跨域通訊的方法分析
這篇文章主要介紹了JS實現(xiàn)iframe中子父頁面跨域通訊的方法,結(jié)合實例形式分析了JS實現(xiàn)iframe頁面跨域通訊常見操作技巧與相關(guān)注意事項,需要的朋友可以參考下2020-03-03
javascript中break，continue和return語句用法小結(jié)
break，continue和return這三個語句的用法新手們經(jīng)常弄混淆，至少在我學(xué)習(xí)c語言的時候經(jīng)常把它們的用法給搞錯。不過現(xiàn)在好了，我已徹底搞清楚它們之間的用法2012-05-05
javascript 數(shù)組排序函數(shù)sort和reverse使用介紹
reverse方法將一個Array對象中的元素位置進行反轉(zhuǎn)，sort方法返回一個元素已經(jīng)進行了排序的 Array 對象，下面為大家介紹下2013-11-11
第一次接觸神奇的Bootstrap，Bootstrap提供了用戶友好、擴瀏覽器的解決方案,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
JS數(shù)組去重常用方法實例小結(jié)【4種方法】
這篇文章主要介紹了JS數(shù)組去重常用方法,結(jié)合實例形式總結(jié)分析了4種常用的數(shù)據(jù)去重實現(xiàn)方法,涉及javascript數(shù)組的遍歷、判斷、追加等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
如果需要在程序中獲取當(dāng)前用戶的IP,通常手段都是需要使用服務(wù)器,但現(xiàn)在借助WebRTC的強大功能,我們可以直接在瀏覽器客戶端獲取用戶IP,所以本文小編將給大家介紹一下如何在在瀏覽器中使用WebRTC獲取用戶IP地址,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下2023-11-11
在javascript中，null＞=0 為真，null==0卻為假，null的值詳解
這篇文章主要介紹了在javascript中，null＞=0 為真，null==0卻為假，null的值詳解的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JavaScript?引用類型之原始值包裝類型String,String是對應(yīng)字符串的引用類型。要創(chuàng)建一個String?對象，使用String?構(gòu)造函數(shù)并傳入一個數(shù)值,更多相關(guān)內(nèi)容需要的朋友可以參考一下2022-07-07