Javascipt: counting chars!

Dev Shed Forums Sponsor:

May 4th, 2008, 09:16 PM

whipaus

Registered User

Join Date: May 2008

Posts: 2

Time spent in forums: 29 m 30 sec
Reputation Power: 0

Javascipt: counting chars!

I have amended a javascript function i found on the web to count charecters within a textbox as i write in it. This works...

Code =

Code:


<html>
<head>
<title></title>
<script type="text/javascript" >

function CheckFieldLength(fn,wn,rn,mc) {
  var len = fn.value.length;
  if (len > mc) {
    fn.value = fn.value.substring(0,mc);
    len = mc;
  }
  document.getElementById(wn).innerHTML = len;

}

</script>

</head>


<body bgcolor="#ffffff" >

<form name=form1 method=post action='http://www.plus2net.com'>

<textarea name="product_profile" cols="120" rows="15" class="formelement" id="taMessage"  onkeyup="CheckFieldLength(taMessage, 'charcount', 'remaining', 10000);" onkeydown="CheckFieldLength(taMessage, 'charcount', 'remaining', 10000);" onmouseout="CheckFieldLength(taMessage, 'charcount', 'remaining', 10000);"></textarea>

		
		
				
      &nbsp;<strong>Contains&nbsp;<span id="charcount" class="compulsory">0</span> &nbsp;characters entered. </strong></p>


 </form>
</body>
</html>

The problem i have is i don't want this counter to include spaces.

Thanks in advance

Can anyone help?

Edit/Delete Message

May 5th, 2008, 12:04 AM

whipaus

Registered User

Join Date: May 2008

Posts: 2

Time spent in forums: 29 m 30 sec
Reputation Power: 0

Code:

<html>
<head>
<title></title>
<script type="text/javascript" >

function CheckFieldLength(fn,wn,rn,mc) {
  var len = fn.value.length;
  if (len > mc) {
    fn.value = fn.value.substring(0,mc);
    len = mc;
  }
  

var spaces = 0


//window.alert(document.getElementById('taMessage').value.split(' ').length )


		if (document.getElementById('taMessage').value.split(' ').length > 1 )
		{
		spaces = document.getElementById('taMessage').value.split(' ').length;
		spaces = spaces - 1
		}
		else
		{
		spaces = 0
		
		}





  document.getElementById(wn).innerHTML = len - spaces;
  
//window.alert(len)


}


</script>

</head>


<body bgcolor="#ffffff" >

<form name="form1" method=post action='http://www.plus2net.com'>

<textarea name="product_profile" cols="120" rows="15" class="formelement" id="taMessage"  onkeyup="CheckFieldLength(taMessage, 'charcount', 'remaining', 10000);" onkeydown="CheckFieldLength(taMessage, 'charcount', 'remaining', 10000);" onmouseout="CheckFieldLength(taMessage, 'charcount', 'remaining', 10000);"></textarea>

		
		
				
      &nbsp;<strong>Contains&nbsp;<span id="charcount" class="compulsory">0</span> &nbsp;characters entered. </strong></p>


 </form>
</body>
</html>

May 5th, 2008, 12:42 AM

Joseph Taylor

Text Ninja

Join Date: Jun 2005

Location: Vancouver, British Columbia, Canada

Posts: 596

Time spent in forums: 1 Week 4 Days 1 h 12 m 43 sec
Reputation Power: 107

Send a message via Skype to Joseph Taylor

Send a message via XFire to Joseph Taylor

A simpler change than the one posted by whipaus follows. I'm not addressing any of the flaws, such as the fact that adding text in the middle will snip text off from the end.

Code:

function CheckFieldLength(fn,wn,rn,mc) {
  var len = fn.value.replace(/\s/g, '').length;
  if (len > mc) {
    fn.value = fn.value.substring(0,mc);
    len = mc;
  }
  document.getElementById(wn).innerHTML = len;

}

May 5th, 2008, 04:29 AM

ktoz

Contributing User

Join Date: Apr 2003

Posts: 420

Time spent in forums: 1 Week 2 Days 3 h 45 m 42 sec
Reputation Power: 25

a little more direct

makes the browser work less as it doesn't have to perform a regular expression search on every keystroke.

html Code:

Original - html Code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
    <head>
        <title>Typing test</title>
        <script language='javascript'>
        
            var spaceChar   = 32;
            var maxChars    = 10000;
            var charcount   = 0;
            
            function IncrementCounter(inEvent)
            {
                if (inEvent.which != spaceChar)
                {
                    // perform bounds check here
                    if (charcount < maxChars)
                        document.getElementById('charcount').innerHTML  = ++charcount;
                    else
                        inEvent.preventDefault();
                }
                else if (charcount == maxChars)
                    inEvent.preventDefault();
            }
            
        </script>
    </head>
    <body>
        <input type=textarea name="product_profile" cols="120" rows="15" onkeydown='IncrementCounter(event)'>
        &nbsp;<strong>Contains&nbsp;<span id="charcount" class="compulsory">0</span>&nbsp;characters entered. </strong>
    </body>
</html>

Edit: Increased the efficiency by adding 'charcount' global. (eliminates the need to fetch and parse the html on every keystroke)

Last edited by ktoz : May 5th, 2008 at 07:49 AM.

Viewing: Dev Shed Forums > Web Design > JavaScript Development > Javascipt: counting chars!

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump

Free IT White Papers!

Accelerating Trading Partner Performance
One in five. That's how many partner transactions have at least one error. That is an amazing statistic, particularly given the extraordinary leaps in innovation across the global supply chain during the past two decades. Download this white paper to learn more.

Competing on Analytics
This Tech Analysis is designed to help identify characteristics shared by analytics competitors, and includes information about 32 organizations that have made a commitment to quantitative, fact-based analysis.

Cost Effective Scaling with Virtualization and Coyote Point Systems
An overview of the industry trend toward virtualization, how server consolidation has increased the importance of application uptime and the steps being taken to integrate load balancing technology with virtualized servers.

Five Checkpoints to Implementing IP Telephony
Implementation planning for IP PBX software and IP telephony has become vital as businesses replace discontinued legacy PBX phone systems. This informative whitepaper outlines five "checkpoints" for any implementation plan that will help make IP communications a successful proposition.

Hosted Email Security: Staying Ahead of New Threats
In the last two years, email has become a fierce battleground between the nefarious forces of spam and malware, and the heroes of messaging protection. The spam volumes increased alarmingly every month, bringing clever new forms of phishing and virus propagation attacks.

More Free IT White Papers!