Max characters indicator in text area

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
User avatar
Patrik iden
 
 
Posts: 558
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Max characters indicator in text area

Post by Patrik iden » Wed Sep 05, 2012 4:25 pm

Put this code in the HTML of text area (Inside Tag*)

Code: Select all

onKeyDown="textCounter(this,'progressbar1',500)" 
onKeyUp="textCounter(this,'progressbar1',500)" 
onFocus="textCounter(this,'progressbar1',500)"></textarea><br />

<div id="progressbar1" class="progress" style="position:absolute;left:15px;top:530px"></div>

<script>textCounter(document.getElementById("TextArea1"),"progressbar1",500)</script
Change 500 to how many characters you want to allow.
And change the ("TextArea1") to what you need.
And chane left:15px;top:530px to what you need.

Put this code in an html box (<head></head>tags)

Code: Select all

<style type="text/css">

.progress{
	width: 1px;
	height: 14px;
	color: white;
	font-size: 12px;
  overflow: hidden;
	background-color: #FF0000;
	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)/101)+"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>
Example page:
http://test3.fcab.se/members/test/maxcharacters.html

User avatar
[RZ]
 
 
Posts: 2147
Joined: Tue Nov 04, 2008 12:08 pm

Re: Max characters indicator in text area

Post by [RZ] » Wed Sep 05, 2012 6:16 pm

this code can easily be fooled...
just mark text, copy and change the focus to your text area, then right click and select paste all times you want... so, no text limit nor progress bar working as expected...
sorry.

User avatar
[RZ]
 
 
Posts: 2147
Joined: Tue Nov 04, 2008 12:08 pm

Re: Max characters indicator in text area

Post by [RZ] » Wed Sep 05, 2012 6:31 pm

it seems you also forgot something...

http://www.dynamicdrive.com/dynamicinde ... input2.htm
http://www.dynamicdrive.com/notice.htm

Form field Progress Bar
Author: Ron Jonk

Form field Limiter v2.0
Author: Dynamic Drive

why not mention the original authors/coders?

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

User avatar
Patrik iden
 
 
Posts: 558
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Max characters indicator in text area

Post by Patrik iden » Thu Sep 06, 2012 4:01 pm

[RZ] wrote:this code can easily be fooled...
just mark text, copy and change the focus to your text area, then right click and select paste all times you want... so, no text limit nor progress bar working as expected...
sorry.
Well, it works for me.

User avatar
Patrik iden
 
 
Posts: 558
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Max characters indicator in text area

Post by Patrik iden » Thu Sep 06, 2012 4:03 pm

[RZ] wrote:it seems you also forgot something...

http://www.dynamicdrive.com/dynamicinde ... input2.htm
http://www.dynamicdrive.com/notice.htm

Form field Progress Bar
Author: Ron Jonk

Form field Limiter v2.0
Author: Dynamic Drive

why not mention the original authors/coders?

/***********************************************
* 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
***********************************************/
Should have done this, sorry.

User avatar
[RZ]
 
 
Posts: 2147
Joined: Tue Nov 04, 2008 12:08 pm

Re: Max characters indicator in text area

Post by [RZ] » Thu Sep 06, 2012 5:16 pm

Well, it works for me.
if you follow step by step what i told you, you will see -crystal clear- how easy is to "break" this script.
ok, don't worry, it's up to the end user to take or not this snippet. just to take in count the downside...

Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests