当前位置: 代码迷 >> Web前端 >> textarea 限制篇幅输入
  详细解决方案

textarea 限制篇幅输入

热度:174   发布时间:2012-08-31 12:55:03.0
textarea 限制字数输入
<form action="" id="commentForm" name="commentForm" method="POST">
    <textarea id="commentText" name="commentText" rows="4" cols="50" maxNum="500"></textarea>
    <p class="c-tip"><input id="subBtn" class="btn" type="submit" value="点评" disabled="true"></input>限1~500字之内,还可以输入<span id="num" class="number">500</span>字</p>
</form>

textarea{width:98%;height:80px;_width:490px;overflow-y:auto;}
.c-tip .number{color:#f56600;}
.c-tip .btn{float:right;}

   var commentText = document.getElementById('commentText'),
        num = document.getElementById('num'),
        maxNum = commentText.getAttribute('maxNum'),
        subBtn = document.getElementById('subBtn');
    subBtn.setAttribute('disabled',true);
    
    var changeFn = function(){
        var val = commentText.value;
        if(val){
            val = val.replace(/^\s+|\s+$/g,'');
        }
        if(val.length == 0){
            subBtn.setAttribute('disabled',true);
        }else{
	        if(val.length > maxNum){
	            subBtn.setAttribute('disabled',true);
	        }else{
	            subBtn.removeAttribute('disabled');
	        }
        }
        num.innerHTML = (maxNum - val.length);
    };
    if(/MSIE ([^;]+)/.test(navigator.userAgent)){
           commentText.onpropertychange = changeFn;
    }else{
        commentText.addEventListener('input',changeFn,false);
    }
    commentText.onkeyup = changeFn;
  相关解决方案