Onload character count

@conetraderJun 23.2006

I have javascript code that counts characters as they are typed into a textarea and tells the user how many of the 480 maximum allowable chracters are left.

This page is posted to a confirmation page where the user can submit or edit the variables. In the edit page, the characters were not being counted. I got the following code from a prior posting on this forum.

[code]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head> <title></title> <script language=”JavaScript” type=”text/javascript”> <!–

function Left(taid,tbid){

document.getElementById(tbid).value=480-document.getElementById(taid).value.length+’ Left’; } //–> </script></head>

<body onload=”Left(‘fred’,’tom’);” >

<textarea id=”fred” name=”message” wrap=”hard” cols=70 rows=10 width=”120″ onKeyDown=”textCounter(this.form.message,this.form.remLen,480);” onKeyUp=”textCounter(this.form.message,this.form.remLen,480);”><?php $message = print(ltrim(stripslashes($message))); ?></textarea> <br><br> You have  <input readonly id=”tom” type=text name=remLen size=3 maxlength=3 value=”480″>  characters left

</body>

</html> [/code]

This works BUT it seems to count something other than just the characters so it comes up with 1-10 fewer characters left than was shown on the original form. ALSO, it doesn’t subtract characters deleted or add characters added on the edit page.

Any ideas on how to make the count correct to start and allow it to change as the textarea content is edited?

Thanks loads, in advance, for any assistance.

to post a comment

JavaScript

3 Comments(s) _↴

@simontuxJun 23.2006 — #How about something like this

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"&gt;
 
 &lt;html&gt;
 
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 
 &lt;script language="javascript"&gt;&lt;!--
 
 <i>	</i>	maxKeys = 480;
 <i>    </i>      var IE = (document.all) ? 1 : 0;
 <i>    </i>      var DOM = 0; 
 <i>    </i>      if (parseInt(navigator.appVersion) &gt;=5) {DOM=1};
 
 <i>    </i>  function txtshow( txt2show ) {
 
 <i>    </i>      // Detect Browser
 
 <i>    </i>      if (DOM) {
 <i>	</i>		var viewer = document.getElementById("txtmsg");
 <i>	</i>		viewer.innerHTML=txt2show;
 <i>    </i>      }
 <i>    </i>      else if(IE) {
 <i>    </i>          document.all["txtmsg"].innerHTML=txt2show;
 <i>    </i>      }
 <i>    </i>  }
 
 function keyup(what) 
 {
 var str = new String(what.value);
 var len = str.length;
 var showstr = "  You have " + len + " characters left";
 if (len &gt; maxKeys) showstr += '&lt;br&gt;Some information will be lost, please revise your entry';
 txtshow( showstr );
 }
 //--&gt;&lt;/script&gt;
 
 &lt;/head&gt;
 
 &lt;body onload="keyup(fred);" &gt;
 
 &lt;textarea cols="70" rows="15" onkeyup="keyup(this)" name="fred"&gt;&lt;?php   $message = print(ltrim(stripslashes($message))); ?&gt;&lt;/textarea&gt;
 
 <i>	</i>		 &lt;br&gt;&lt;br&gt;
 &lt;div id="txtmsg"&gt;&amp;nbsp;&lt;/div&gt;
 
 &lt;/body&gt;
 
 &lt;/html&gt;

@JulianJJun 23.2006 — #The original example is probably counting newline characters. Strip them out before counting. Just a guess.

Julian

@felgallJun 24.2006 — #How about something like this

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"&gt;
 
 &lt;html&gt;
 
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 
 &lt;script language="javascript"&gt;&lt;!--
 
 <i>	</i>	maxKeys = 480;
 <i>    </i>      var IE = (document.all) ? 1 : 0;
 <i>    </i>      var DOM = 0; 
 <i>    </i>      if (parseInt(navigator.appVersion) &gt;=5) {DOM=1};
 
 <i>    </i>  function txtshow( txt2show ) {
 
 <i>    </i>      // Detect Browser
 
 <i>    </i>      if (DOM) {
 <i>	</i>		var viewer = document.getElementById("txtmsg");
 <i>	</i>		viewer.innerHTML=txt2show;
 <i>    </i>      }
 <i>    </i>      else if(IE) {
 <i>    </i>          document.all["txtmsg"].innerHTML=txt2show;
 <i>    </i>      }
 <i>    </i>  }
 
 function keyup(what) 
 {
 var str = new String(what.value);
 var len = str.length;
 var showstr = "  You have " + len + " characters left";
 if (len &gt; maxKeys) showstr += '&lt;br&gt;Some information will be lost, please revise your entry';
 txtshow( showstr );
 }
 //--&gt;&lt;/script&gt;
 
 &lt;/head&gt;
 
 &lt;body onload="keyup(fred);" &gt;
 
 &lt;textarea cols="70" rows="15" onkeyup="keyup(this)" name="fred"&gt;&lt;?php   $message = print(ltrim(stripslashes($message))); ?&gt;&lt;/textarea&gt;
 
 <i>	</i>		 &lt;br&gt;&lt;br&gt;
 &lt;div id="txtmsg"&gt;&amp;nbsp;&lt;/div&gt;
 
 &lt;/body&gt;
 
 &lt;/html&gt;

[/QUOTE]

Get rid of all of the browser sensing garbage out of that script (which fails to work proerly in Opera) and use feature sensing instead.

<i>
 </i>         if (document.getElementById) {
 var viewer = document.getElementById("txtmsg");
 viewer.innerHTML=txt2show;
 }
 else if(document.all) {
 document.all["txtmsg"].innerHTML=txt2show;

Also in #JavaScript _↴

drop down multiple scripts Newbie JS GIRL with question for JS STUD!

Success!

Help @conetrader spread the word by sharing this article on Twitter...

Tweet This

Onload character count

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴