<!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; //提示字數的input
var limitCount; //限制的字數
var txtlength; //到達限制時，字符串的長度
this.init = function() {
txtNote = this.txtNote;
txtLimit = this.txtLimit;
limitCount = this.limitCount;
txtNote.oninput = function() {
wordsLimit()
};
txtNote.oninput = 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>
</html>
