Frontendplace Blog

Sharing Frontend developing ideas

Limited textarea field

Do you want a colored progressbar under a textarea and limit the amount of text someone can put in it. Then you need this script. Progressbarred Textarea

Previously submitted to and then copied a lot: etc. etc etc. and even wordpress : I also made a coldfusion component you can use: here is de code:

Example module of limited textbox for coldfusion

example call:

<cfmodule template="#moduledirectory#/limitedtextbox.cfm"

Save this text in module: limitedtextbox.cfm in the module directory of your site
/* Purpose: show a red bar under textarea
<cfoutput> <!– #GetFileFromPath(GetCurrentTemplatePath())# –></cfoutput>
<cfparam name="" type="string" default="limittextarea">
<cfparam name="attributes.width" type="numeric" default="300">
<cfparam name="attributes.maxchar" type="numeric" default="300">
<cfparam name="attributes.height" type="numeric" default="5">
<cfparam name="attributes.value" type="string" default="">
<cfparam name="attributes.class" type="string" default="">
<cfparam name="attributes.first" type="boolean" default="true">
<cfif attributes.first>
<style type="text/css">
.progress {
background: #CCFFFF;
height: 2px;
width: 1px;
font-size: 2px;
vertical-align: text-top;

<script language="JavaScript" type="text/JavaScript">
function textCounter(field,counter,maxlimit) {
// text width//
var fieldWidth = parseInt(;
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
// set position getAnchorPosition(anchorname)
function setcolor(obj,percentage,prop){[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
<div id="" style="position:relative; width:#attributes.width#px; height:auto; display:inline; vertical-align: text-top;">
<textarea style="width:#attributes.width#px" class="#attributes.class#" rows="#attributes.height#" name="" id="" title="enter maximum #attributes.maxchar# characters" onChange="textCounter(this,’’,#attributes.maxchar#)" onKeyUp="textCounter(this,’’,#attributes.maxchar#)" onFocus="textCounter(this,’’,#attributes.maxchar#)">#attributes.value#</textarea><br /><div id="" class="progress"></div></div>
<cfset application.limitedtextbox=true>

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>