Tuesday, 12 April 2011

Text Area Characters Counter Using Javascript


This is  cool text area counter, Limit Text Area,restrict the Text Area  size and count no of characters in text area

javascript function:



<script type="text/javascript">
 var counter ="150";
 window.onload = function() {
      //call this methods in page onload.
      addressDescCount();
       
      }
function addressDescCount(){
     
var addressTex = document.getElementById('address').value;
 var aCount=counter-addressTex.length;
 if(parseInt(aCount) < 0){
document.getElementById('addressLimit').innerHTML=0;
}else{
document.getElementById('addressLimit').innerHTML=aCount;
}

}
function addressCount()
{
      var tex = document.getElementById('address').value;
    var len = tex.length;
      if(len > counter){
        tex = tex.substring(0, counter);
        document.getElementById('address').value=tex;
        document.getElementById('addressLimit').innerHTML =0;
        return false;
        }
       document.getElementById('addressLimit').innerHTML = counter-len;
}
</script>

code for the form:

<div>
      <table>
      <tr><td style="color: #999999">max size :150 Characters</td></tr>
        <tr><td>
        <asp:TextBox ID="address" runat="server" TextMode="MultiLine" Height="86px"
                  onkeyup="addressCount()"    Width="423px" ></asp:TextBox>
        </td></tr>
        <tr><td>
        <asp:Label ID="addressLimit" style="float:right;padding-left:130px"  runat="server" Text="Label"></asp:Label>
        </td></tr>
      </table>
    </div>

OutPut

No comments:

Post a Comment