Just to share after making it work.
Description: I need a simple way to limit the text area field and display "Characters Left" for
text area field by ONLY editing the Add form in the visual editor, WITHOUT touching
commonfunctions.php and etc. as suggested by some other methods in the forum.
PHPR Version: 5.0 Build 766 (Should also work for all versions)
Step 1: In Visual Editor, Switch to Html mode for the Add Form.
Step 2: Add the codes below after </HERAD> and <BODY> Tags,
note it works without any {literal} tags for me.
[codebox]
<!-- Limit Character -->
<script type=text/javascript>
/ Form field Limiter script- By Dynamic Drive /
var ns6=document.getElementById&&!document.all
function restrictinput(maxlength,e,placeholder){
if (window.event&&event.srcElement.value.length>=maxlength)
return false
else if (e.target&&e.target==eval(placeholder)&&e.target.value.length>=maxlength){
var pressedkey=/[a-zA-Z0-9\.\,\/]/ //detect alphanumeric keys
if (pressedkey.test(String.fromCharCode(e.which)))
e.stopPropagation()
}
}
function countlimit(maxlength,e,placeholder){
var theform=eval(placeholder)
var lengthleft=maxlength-theform.value.length
var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder)
if (window.event||e.target&&e.target==eval(placeholder)){
if (lengthleft<0)
theform.value=theform.value.substring(0,maxlength)
placeholderobj.innerHTML=lengthleft
}
}
function displaylimit(thename, theid, thelimit){
var theform=theid!=""? document.getElementById(theid) : thename
var limit_text='<b><span id="'+theform.toString()+'">'+thelimit+'</span></b> characters remaining'
if (document.all||ns6)
document.write(limit_text)
if (document.all){
eval(theform).onkeypress=function(){ return restrictinput(thelimit,event,theform)}
eval(theform).onkeyup=function(){ countlimit(thelimit,event,theform)}
}
else if (ns6){
document.body.addEventListener('keypress', function(event) { restrictinput(thelimit,event,theform) }, true);
document.body.addEventListener('keyup', function(event) { countlimit(thelimit,event,theform) }, true);
}
}
</SCRIPT>
<!-- Limit Character -->
[/codebox]
Step 3: Switch to WYSIWYG Mode, click on the TextArea Field, so that it's selected.
Switch to HTML Mode and you will notice the cursor is located at the TextArea Field.
and insert the following, where msg_text is my field name for the TextArea field:
[codebox]
<!-- Limit Character -->
<script> displaylimit("document.editform.value_msg_text","",160)</SCRIPT>
<!-- Limit Character -->
[/codebox]
Step 4: It will look like the following:
[codebox]
{BEGIN msg_text_fieldblock}<TR>
<TD class=editshade_b style="PADDING-LEFT: 15px" width=150>Msg Text</TD>
<TD class=editshade_lb style="PADDING-LEFT: 10px" width=250>{$msg_text_editcontrol}
<IMG src="images/icon_required.gif">
<!-- Limit Character -->
<script> displaylimit("document.editform.value_msg_text","",160)</SCRIPT>
<!-- Limit Character -->
</TD></TR>
{END msg_text_fieldblock}
[/codebox]
Step 5: Generate the project and test it. You should see "XX characters remaining"
below your TextArea field and it will be counting down in real-time when you type on the field.
There is nothing to be changed at the codes on step 2, just step 3, where you put in
the right field name.
P.S. this code is adapted from another post here
and i have tested working and clean it up and put down the specific working steps
if it helps other.
