當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JS 限制input框的输入字数,并提示可输入字数
生活随笔
收集整理的這篇文章主要介紹了
JS 限制input框的输入字数,并提示可输入字数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>限制文件字數字</title>
</head>
<body>
<span class="span">備注信息</br><span id="stay" style="display: none">?您還可以輸入:<span id="txtCount"></span>個字符的描述信息</span></span></br><input id="Remark_information" name="Remark_information" type="text"><script>var lim=new limit();lim.txtNote=document.getElementById("Remark_information");lim.txtLimit=document.getElementById("txtCount");lim.limitCount=80;lim.init();function limit(){var txtNote;//文本框var txtLimit;//提示字數的inputvar limitCount;//限制的字數var txtlength;//到達限制時,字符串的長度this.init=function(){txtNote=this.txtNote;txtLimit=this.txtLimit;limitCount=this.limitCount;txtNote.οninput=function(){wordsLimit()};txtNote.οninput=function(){wordsLimit()};txtLimit.innerText=limitCount;};function wordsLimit(){var noteCount=txtNote.value.length;var InPut=document.getElementById("Remark_information").value.length;if(InPut<1){document.getElementById("stay").style.display="none";return}if(InPut>=1){document.getElementById("stay").style.display="inline";document.getElementById("stay").style.color="green";}if(InPut>70){document.getElementById("stay").style.color="red";}if(noteCount>limitCount){txtNote.value=txtNote.value.substring(0,limitCount);txtLimit.innerText=0;}else{txtLimit.innerText=limitCount-noteCount;}txtlength=txtNote.value.length;//記錄每次輸入后的長度}}
</script>
</body>
?來自:http://www.cnblogs.com/zhujiasheng/p/6113983.html
轉載于:https://www.cnblogs.com/zhujiasheng/p/6113983.html
總結
以上是生活随笔為你收集整理的JS 限制input框的输入字数,并提示可输入字数的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 晚上梦到蛇第二天见蛇是怎么回事
- 下一篇: 面试题二