[SOLVED] Javascript character limit with multiple textareas

[Jason28]

Hello, I have a working javascript function that I grabbed from the internet a while back allows you to limit the amount of text for a textarea field and displays how many characters are left.  I have multiple textarea fields and even though they have their own IDs it doesn't work with multiple fields on the same page.  Here is the javascript:

 

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 for description'
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); 
}
}

 

Here are a couple of my form fields (there are 5 total):

 

<tr>
                  <td class="bigtext">Favorite Movies:</td>
                  <td class="smalltext"><textarea name="movies" id="movies" rows="3" style="width: 250px">{post_movies}</textarea>
			  <br><script>displaylimit("","movies",255)</script><br></td>
                </tr>
                <tr>
                  <td class="bigtext">Favorite TV Shows:</td>
                  <td class="smalltext"><textarea name="shows" id="shows" rows="3" style="width: 250px">{post_shows}</textarea>
			  <br><script>displaylimit("","shows",255)</script><br></td>
                </tr>

 

When you type in the second textarea, the numbers from the first field decrease instead of the textarea that I am typing in.  So when I type in the shows field the movies field decreases number.  A simple fix? Or if you would like to provide me a simplier version that does the same task that would be ok as well. Thanks!

 

 

[F1Fan]

That looks more complicated than it needs to be. Try this:

 

JS:

function checkTextArea(id,limit){
  if (document.getElementById(id)){
    var txt = document.getElementById(id).value;
    if (txt.length>limit){
      document.getElementById(id).value = txt.substr(0,limit);
    }
    len = document.getElementById(id).value.length;
    if (document.getElementById('count'+id)){
      document.getElementById('count'+id).innerHTML = (limit-len)+" characters remaining.";
    }
  }
}

 

HTML:

                <tr>
                  <td class="bigtext">Favorite TV Shows:</td>
                  <td class="smalltext"><textarea onkeyup="checkTextArea('shows',255);" name="shows" id="shows" rows="3" style="width: 250px">{post_shows}</textarea>
			  <br><span id="countshows">255 characters remaining.</script><br></td>
                </tr>

[Jason28]

Excellent thanks works great   Simple question could you add the bold text in javascript for the number count?  I tried surrounding (limit-len)+" with bold tags but I assume that I am missing quotes or something since it didn't work.  Thanks

[F1Fan]

Sure. Change it to this:

 

document.getElementById('count'+id).innerHTML = "<b>"+(limit-len)+"</b> characters remaining.";

[Jason28]

Thanks a lot you guys are great