文本显示输入字数

最新推荐文章于 2025-09-10 14:53:18 发布

转载最新推荐文章于 2025-09-10 14:53:18 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/babyhhcsy/archive/2012/12/27/42dafab8344d943a6aa45792ec61f9cd.html

文章标签：

#javascript #ViewUI

  
        <
        style 
        type
        =
        "text/css"
        > 
       
        .progress{ 
       
        width: 1px; 
       
        height: 14px; 
       
        color: white; 
       
        font-size: 12px; 
       
        overflow: hidden; 
       
        background-color: navy; 
       
        padding-left: 5px; 
       
        } 
       
        </
        style
        > 
       
        <
        script 
        type
        =
        "text/JavaScript"
        > 
       
        function textCounter(field,counter,maxlimit,linecounter) { 
       
        // text width// 
       
        var fieldWidth =  parseInt(field.offsetWidth); 
       
        var charcnt = field.value.length;         
       
        // trim the extra text 
       
        if (charcnt > maxlimit) {  
       
        field.value = field.value.substring(0, maxlimit); 
       
        } 
       
        else {  
       
        // progress bar percentage 
       
        var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ; 
       
        document.getElementById(counter).style.width =  parseInt((fieldWidth*percentage)/100)+"px"; 
       
        document.getElementById(counter).innerHTML="已输: "+percentage+"%" 
       
        // color correction on style from CCFFF -> CC0000 
       
        setcolor(document.getElementById(counter),percentage,"background-color"); 
       
        } 
       
        } 
       
        function setcolor(obj,percentage,prop){ 
       
        obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)"; 
       
        } 
       
        </
        script
        > 
       
        <
        p
        >限制：120字节</
        P
        > 
       
        <
        form
        > 
       
        <
        textarea 
        rows
        =
        "5" 
        cols
        =
        "40" 
        name
        =
        "maxcharfield" 
        id
        =
        "maxcharfield" 
       
        onKeyDown
        =
        "textCounter(this,'progressbar1',120)" 
       
        onKeyUp
        =
        "textCounter(this,'progressbar1',120)"
       
        onPaste
        =
        "textCounter(this,'progressbar1',120)" 
       
        onFocus
        =
        "textCounter(this,'progressbar1',120)" 
        ></
        textarea
        ><
        br 
        /> 
       
        <
        div 
        id
        =
        "progressbar1" 
        class
        =
        "progress"
        ></
        div
        > 
       
        <
        script
        >textCounter(document.getElementById("maxcharfield"),"progressbar1",120)</
        script
        > 
       
        </
        form
        ></
        font
        >