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 http://www.dynamicdrive.com/dynamicindex16/limitinput2.htm and then copied a lot: http://oceano.altervista.org/modules.php?name=News&file=article&sid=133 http://www.scriptsby.com/js/view_js.php?id=76 http://forums.lesterchan.net/viewtopic.php?p=2591& http://forums.oscommerce.com/index.php?showtopic=39306&st=220 http://www.webdeveloper.com/forum/archive/index.php/t-96960.html etc. http://www.thaimisc.com/r/view.php?id=604&category=8 http://javascript.seiten-finden.de/javascript-show-1128536217-ticker_textarea_mit_fortschrittsanzeige.html http://www.udaleator.md/notes/26/ etc etc. and even wordpress : http://wordpress.org/support/topic/66084 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"
   width="300"
   height="3"
   id="my_idname"
   maxchar="150"
   value="#textfielddescr#">

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="attributes.id" 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;
display:inline-table;
vertical-align: text-top;
}
–>
</style>

<script language="JavaScript" type="text/JavaScript">
function textCounter(field,counter,maxlimit) {
// 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
// set position getAnchorPosition(anchorname)
setcolor(document.getElementById(counter),percentage,"background");
}
}
function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
</cfif>
<cfoutput>
<div id="#attributes.id#_layer" 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="#attributes.id#" id="#attributes.id#" title="enter maximum #attributes.maxchar# characters" onChange="textCounter(this,’#attributes.id#_pr’,#attributes.maxchar#)" onKeyUp="textCounter(this,’#attributes.id#_pr’,#attributes.maxchar#)" onFocus="textCounter(this,’#attributes.id#_pr’,#attributes.maxchar#)">#attributes.value#</textarea><br /><div id="#attributes.id#_pr" class="progress"></div></div>
<script>textCounter(document.getElementById("#attributes.id#"),"#attributes.id#_pr",#attributes.maxchar#)</script>
</cfoutput>
<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>