2. PHPRunner General questions
  3. Javascript Character limiter
This topic is locked

Javascript Character limiter

 		2/11/2007 10:48:14 PM
PHPRunner General questions
G
 gdude66 author

I am trying to use a javascript character limiter with a progress indicator on the text areas in an edit form. At the moment I have inserted the code in the head and the required elements in the body see head section below using visual editor.

<literal>

<script type="text/javascript">
/

Form field Limiter script- By Dynamic Drive

For full source code and more DHTML scripts, visit http://www.dynamicdrive.com

This credit MUST stay intact for use

/
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 on your input limit'

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>{/literal}


Then when I insert the following in the body

<TR>

<TD class=shade width=150>Future Learning Goal 1</TD>

<TD width=250>{build_edit_control field="vflg1a" }<BR><script>

displaylimit("document.editform.vflg1a","",100)

</script><BR></TD>


I can see that the javascript is working as the count is displayed but doesn't change as text is inputted.

Do I need to do this in visual editor or when the pages are generated?
Also when I use visual editor - navigate away and then come back the </head> and <body> tags keep changing to above the inserted code. Is this a bug?
J
 		Jane 2/12/2007

Graeme,
you need to do the following:

  1. add JavaScript code to the <BODY> section between {literal} and {/literal}.
  2. edit your code. See my changes in Bold:
    <TD width=250>{build_edit_control field="vflg1a" value=$value_vflg1a mode="edit" }<BR><script>displaylimit("","value_vflg1a",100);</script><BR></TD>



3. build your project

4. open generated include/commonfunctions.php file, find BuildEditControl function, locate this line:

echo '<textarea name="'.$cfield.'" style="width: ' . $nWidth . 'px;height: ' . $nHeight . 'px;">'.htmlspecialchars($value).'</textarea>';

and replace it with this one:

echo '<textarea id="'.$cfield.'" name="'.$cfield.'" style="width: ' . $nWidth . 'px;height: ' . $nHeight . 'px;">'.htmlspecialchars($value).'</textarea>';
G
 		gdude66 author 2/12/2007

Thanks Jane I will give this a try. The actual javascript function not the insert part - are you saying that needs to be inserted in the body and not the head of the page and if so - why? In the javascript instructions it says that that needs to be included in the head of the page then the bits you have edited in the body.
J
 		Jane 2/13/2007

Graeme,
Visual Editor doesn't allow to add code to the HEAD section.

You can add your javascript code in any section of the file and it will work. The position of javascript code is of no concern.
G
 		gdude66 author 2/13/2007

Hi Jane,

It didn't work but I think that is more the javascript quirks.

This does work however
This isnt' needed



It all works fine and does as expected without errors. Works in ie 5+ and firefox 1+. Thanks for your help. <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=15509&image=1&table=forumreplies' class='bbc_emoticon' alt=':rolleyes:' />