Full version: jsB@nk » Form » Textarea » Form field Progress Bar
URL: https://www.javascriptbank.com/form-field-progress-bar.html
Similar in function to Form Field Limiter, this JavaScript allows you to restrict the number of characters inside a form element (ie: textarea) while displaying a progress bar on the remaining characters beneath it. Very cool, and works in IE4+, NS6+, and Opera 7+.
Full version: jsB@nk » Form » Textarea » Form field Progress Bar
URL: https://www.javascriptbank.com/form-field-progress-bar.html
<style type="text/css">.progress{width: 1px;height: 14px;color: white;font-size: 12px; overflow: hidden;background-color: navy;padding-left: 5px;text-align: left;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/JavaScript">/************************************************ Form Field Progress Bar- By Ron Jonk- http://www.euronet.nl/~jonkr/* Modified by Dynamic Drive for minor changes* Script featured/ available at Dynamic Drive- http://www.dynamicdrive.com* Please keep this notice intact***********************************************/function textCounter(field,counter,maxlimit,linecounter) {// text width//var fieldWidth = parseInt(field.offsetWidth);var charcnt = field.value.length; // trim the extra textif (charcnt > maxlimit) { field.value = field.value.substring(0, maxlimit);}else { // progress bar percentagevar percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";document.getElementById(counter).innerHTML="Limit: "+percentage+"%"// color correction on style from CCFFF -> CC0000setcolor(document.getElementById(counter),percentage,"background-color");}}function setcolor(obj,percentage,prop){obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><form><textarea rows="5" cols="40" name="maxcharfield" id="maxcharfield" onKeyDown="textCounter(this,'progressbar1',20)" onKeyUp="textCounter(this,'progressbar1',20)" onFocus="textCounter(this,'progressbar1',20)" ></textarea><br /><div id="progressbar1" class="progress"></div><script>textCounter(document.getElementById("maxcharfield"),"progressbar1",20)</script></form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->