How to have a javascript character counter add multiple text boxes' totals

Question

I can not seem to find any information anywhere as to how to do this. I don't even know if using the && works to add the text boxes values together. I can get the counter to easily count one box or the other, but I need the text in both boxes to give the total characters remaining, given that the combined characters in each box don't exceed 500.

Here is my javascript counter.

<SCRIPT type="text/javascript">
function textCounter(field,cntfield,maxlimit) 
{
  if (field.value.length > maxlimit)
    field.value = field.value.substring(0, maxlimit);
  else
    cntfield.value = maxlimit - field.value.length;
}
</script>

And here are my text boxes.

    <form name="myForm">
    <textarea name="message1" wrap="physical" cols="28" rows="5"
    onKeyDown="textCounter(document.myForm.message1 && document.myForm.message2,document.myForm.chars,500)"
onKeyUp="textCounter(document.myForm.message1 && document.myForm.message2,document.myForm.chars,500)"></textarea>
<br>
<textarea name="message2" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message1 && document.myForm.message2,document.myForm.chars,500)"
onKeyUp="textCounter(document.myForm.message1 && document.myForm.message2,document.myForm.chars,500)"></textarea>
<br>
<input readonly type="text" name="chars" size="3" maxlength="3" value="500">
characters left

Is there a reason you're not using jQuery or some other javascript framework? It greatly simplifies these sorts of tasks. — Spencer Ruport
– Spencer Ruport, Commented Nov 7, 2012 at 1:09
&& is a logical and. Use + to concat strings. - What are you trying to pass to textCounter as first arg anyway? — m02ph3u5
– m02ph3u5, Commented Nov 7, 2012 at 1:10
I don't have access to anything but notepad and wordpad here, not able to download or install anything to these computers, and I have very limited web access, this is one of the few sites that isn't blocked. I have tried using the +, but it still gives the same results, and only reads from the first text box. — SoundChaos
– SoundChaos, Commented Nov 7, 2012 at 1:14

m02ph3u5 · Accepted Answer · 2012-11-07 01:15:31Z

1

Looks like you're trying to pass two objects to your function textCounter as first argument. You can't put these together with && (which is the logical "and"). You can however pass an array of objects to textCounter.

textCounter( [document.myForm.message1,document.myForm.message2], ... )

And from within textCounter you access the objects by their index

textCounter( fields, ... ) {
    if ( fields[0].value. length ... ){}
    if ( fields[1].value. length ... ){}
}

answered Nov 7, 2012 at 1:15

m02ph3u5

3,1617 gold badges43 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RobG · Accepted Answer · 2012-11-07 06:00:16Z

Your code can be made a little more concise by using the form property of a form control:

<form name="myForm">
    <textarea name="message1" wrap="physical" cols="28" rows="5"
    onKeyDown="textCounter(this.form.message1 && this.form.message2, this.form.chars, 500)"
    ...></textarea>

In thea above:

this.form.message1 && this.form.message2

is processed by first evaluating this.form.message1, which returns a reference to a DOM element, which type converts to true. So the the next expression is evaluated and the result returned.

So you are effectively passing this.form.message2 to the function. It seems that you want to pass both controls, then get the total number of characters of both.

So you need to pass both elements to the function and adjust your logic accordingly, e.g.

function textCounter(field0, field1, cntfield, maxlimit) {
  var totalChars = field0.value.length + field1.value.length;
  var diff = maxlimit - totalChars;

  if (diff < 0) {
    field0.value = field0.value.substring(0, field0.value.length + diff);

  } else {
    cntfield.value = diff;
  }
}

and the markukp:

<form name="myForm">
    <textarea name="message1" wrap="physical" cols="28" rows="5"
    onKeyDown="textCounter(this, this.form.message2, this.form.chars, 500)"
    onKeyUp="textCounter(this, this.form.message2, this.form.chars, 500)"></textarea>
<br>
    <textarea name="message2" wrap="physical" cols="28" rows="5"
    onKeyDown="textCounter(this, this.form.message1, this.form.chars, 500)"
    onKeyUp="textCounter(this, this.form.message1, this.form.chars, 500)"></textarea>
<br>
<input readonly type="text" name="chars" size="3" maxlength="3" value="500">
characters left

Note that this produces a fairly annoying behaviour once the limit is reached, particularly if more characters are added in the middle and the user doesn't notice them being trimmed from the end.

Much better to let users know how many characters they have left or need to remove and let them work out how to meet that requirement (e.g. see how StackOverflow comments work).

Edit

I would just show how many characters are left, with minus sign and change of colour if it goes negative, e.g.

<style ...>
  .negative {
    font-weight: bold;
    color: red;
   }
</style>

<script>

function textCounter(field0, field1, cntfield, maxlimit) {
  var totalChars = field0.value.length + field1.value.length;
  var diff = maxlimit - totalChars;

  if (diff < 0) {
      addClass(cntfield, 'negative');

  } else {
      removeClass(cntfield, 'negative');
  }
  cntfield.value = diff;
}

Some helper functions:

function hasClass(el, cName) {
  var re = new RegExp('(^|\\s)' + cName + '(\\s|$)');
  return re.test(el.className);
}

function addClass(el, cName) {
  if (!hasClass(el, cName)) {
    el.className = (el.className + ' ' + cName).replace(/(^\s*)|(\s*$)/g,'').replace(/\s+/g,' ');
  }
}

function removeClass(el, cName) {
  var re;
  if (hasClass(el, cName)) {
    re = new RegExp('(^|\\s)' + cName + '(\\s|$)');
    el.className = el.className.replace(re, ' ').replace(/(^\s*)|(\s*$)/g,'').replace(/\s+/g,'');
  }
}

</script>

Great! that works perfectly, never would have thought of it. Thanks a lot for all the additional info as well, I just started learning HTML and javascript, and am doing it from scratch with no education in a closed environment. What you said about the behaviour once it reaches the limit also is a big deal and if I could get it to work like the comments here, that would be even better. Is there any way you can see that would create it like that with a simple change?

Collectives™ on Stack Overflow

How to have a javascript character counter add multiple text boxes' totals

2 Answers 2

Comments

Edit

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Edit

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related