<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea id="text" style="height:40px;"></textarea>
<div id="input_length_limit">還可以輸入 <span id="input_length_max">20</span> 個字符</div>
<script>
window.onload = function () {
var text = document.getElementById('text');
var limit = document.getElementById('input_length_limit');
var max = document.getElementById('input_length_max');
limit.style.display = 'none';
var lengthMax = 20;
text.addEventListener('keyup', function () {
var textVal = text.value;
var length;
length = parseInt(lengthMax) - parseInt(textVal.length);
if(length<0){
length = 0;
}
max.innerHTML = length;
if (textVal.length >= lengthMax) {
document.getElementById('text').value = textVal.substr(0, lengthMax);
}
});
text.onfocus = function(){
limit.style.display = "block";
};
text.onblur = function () {
limit.style.display = "none";
};
}
</script>
</body>
</html>
剩餘字數動態變化
0時就不能再輸入了