当前位置: 代码迷 >> Web前端 >> textarea的篇幅动态显示
  详细解决方案

textarea的篇幅动态显示

热度:68   发布时间:2012-11-01 11:11:33.0
textarea的字数动态显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript">
  function checkLength(obj){
        var count=0;
        var inputContent = obj.value;
        var total = document.getElementById("total").innerHTML;
        var used = document.getElementById("used");
        var inputLen = inputContent.length;
        var lastLen = 0;
        if(lastLen != inputLen){
            for(var i=0;i<inputLen;i++){
                count = (inputContent.charCodeAt(i)<=256)?(count+1):(count+8);
                if(count > total){
                    obj.value = inputContent.substring(0,i);
                    count = total;
                    break;
                }
            }
            used.innerHTML = count;
            lastLen = inputLen;
        }
    }
</script>
</head>
<body>
<table>
<tr>
  <td width="400"><textarea onpropertychange="checkLength(this)"  oninput="checkLength(this)" style="width: 400px;font-size: 12px;" rows="3" name="comments" id="comments"></textarea>
  </td>
</tr>
<tr>
  <td>
    <span id="used" style="color:#FF0000">0</span>/<span id="total"  style="color:#FF0000">1000</span>
  </td>
</tr>
</table>
</body>
</html>

ie,ff下测试通过、、、

  相关解决方案