rockit
rockit

Reputation: 3796

javascript character count for a textarea... is not working, but it works for <input type="text">'s

I have code that is intended to show the user the number of remaining characters available in text boxes and text areas. Only the code works flawlessly for <input type="text">'s and doesn't work at all for <textarea>'s.

I'm not sure why... My code is below

My js--

 function toCount(entrance,exit,text,characters) {  
  var entranceObj=getObject(entrance);  
  var exitObj=getObject(exit);  
  var length=characters - entranceObj.value.length;  
  if(length <= 0) {  
    length=0;  
    text='<span class="disable"> '+text+' </span>';  
    entranceObj.value=entranceObj.value.substr(0,characters);  
  }  
  exitObj.innerHTML = text.replace("{CHAR}",length);  
}  

My html

<textarea style="overflow-x: hidden;" value="<%=strVariable %>" type="text" id="gBann"       
name="MyName" maxlength="1000" size="1000" rows="8" cols="40"   
onKeyUp="toCount('gBann','uBann','{CHAR} characters remaining',1000);" >  
</textarea>  
<span id="uBann" class="minitext">1000 characters remaining</span>  

Upvotes: 0

Views: 4001

Answers (3)

Rajeev
Rajeev

Reputation: 1

Please try this javascript:

function Counter(txtfield, limit) { 

            if (txtfield.value.length > maxlimit)
                txtfield.value = txtfield.value.substring(0, maxlimit);

            // else, update 'characters left' counter
            else {                
                document.getElementById('myCounter').innerHTML = maxlimit - txtfield.value.length
            }        
        }

Here "myCounter" is a span id as in 500 and "txtfield" is the textarea ID.

My ASP code:

<asp:TextBox ID="txtMessage" onKeyUp="javascript:textCounter(this,<%=Count%>);" onKeyDown="javascript:textCounter(this,<%=Count%>);"></asp:TextBox>

Upvotes: 0

jeremysawesome
jeremysawesome

Reputation: 7254

You want to use document.getElementById instead of getObject.

So the following works:

function toCount(entrance,exit,text,characters) {  
    var entranceObj=document.getElementById(entrance);  
    var exitObj=document.getElementById(exit);  
    var length=characters - entranceObj.value.length;  
    if(length <= 0) {  
    length=0;  
    text='<span class="disable"> '+text+' <\/span>';  
    entranceObj.value=entranceObj.value.substr(0,characters);  
    }  
    exitObj.innerHTML = text.replace("{CHAR}",length);  
    }  

Upvotes: 2

treeface
treeface

Reputation: 13341

I'm not sure if this will solve your problem, but a textarea doesn't work like an input[type=text] in the sense that you have to echo the value inside the element like this:

<textarea>test</textarea>

Instead of this:

<textarea value="test"></textarea>

However, the value attribute of a textarea DOM element should be accessible in the same way, as can be seen here:

http://jsfiddle.net/bwGKk/

Upvotes: 0

Related Questions