<!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时就不能再输入了
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
