Progess Bar Textarea

Ron Jonk Sep 21, 2004

A textarea script with a twist. This snippet adds a progress bar to the textarea to let you know how many characters you have left.

The JavaScript Source: Page Details: Progess Bar Textarea

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- ONE STEP TO INSTALL PROGESS BAR TEXTAREA:

1.  Copy the coding into the BODY of your HTML document  -->

<BODY>

function textCounter(field,counter,maxlimit,linecounter) {

// text width//

var fieldWidth =  parseInt(field.style.width);

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";

// 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>

<!--

.progress {

width: 1px;

height: 2px;

background-color:#CCFFFF;

}

-->

</style>

<form>

</textarea><br />

</form>

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Progess Bar Textarea

Leave a Response

Attention JavaScript Coders

Go Deeper