Sunday, January 31, 2010

Check TextArea Max Length using Javascript




Please visit my new Web Site WWW.Codedisplay.com



In many forums i found that Asp.Net C# VB.Net developers ask how to check max length of textarea HTML control. Thats why i think i post this topic. This article also resolve cross browser issue as well as copy paste problem in clipboard. When i am googling i found a lot of articles on this but i didn't get a javascript function which can resolve cross-browser issue as well as copy paste problem. Hope this article will help you to restrict user within your maxlength limit.

If you are looking for setting Asp.net TextBox max length using javascript then click here.

Output like:

Check TextArea Max Length

The javascript function is given below:
<script type="text/javascript">
    function ismaxlength(objTxtCtrl,nLength)
    {
        if (objTxtCtrl.getAttribute && objTxtCtrl.value.length>nLength)
            objTxtCtrl.value=objTxtCtrl.value.substring(0,nLength)
        
        if(document.all)
            document.getElementById('lblCaption').innerText=objTxtCtrl.value.length +' Out Of '+nLength;
        else
            document.getElementById('lblCaption').textContent=objTxtCtrl.value.length +' Out Of '+nLength;
        
    }
</script>
How to use from TextArea Control:
<textarea rows="5" cols="50" onkeyup="return ismaxlength(this,125)"></textarea>
<br />
<label id='lblCaption' style="font-family:Tahoma;font-size:1em;font-weight:bold"></label>
Full HTML Markup language is given below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TextArea_Max_Length.aspx.cs" Inherits="TextArea_Max_Length" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
    <title>How to check TextArea max length using javascript</title>
    
    <script type="text/javascript">
        function ismaxlength(objTxtCtrl,nLength)
        {
            if (objTxtCtrl.getAttribute && objTxtCtrl.value.length>nLength)
                objTxtCtrl.value=objTxtCtrl.value.substring(0,nLength)
            
            if(document.all)
                document.getElementById('lblCaption').innerText=objTxtCtrl.value.length +' Out Of '+nLength;
            else
                document.getElementById('lblCaption').textContent=objTxtCtrl.value.length +' Out Of '+nLength;
            
        }
    </script>

</head>

<body>
    <form id="form1" runat="server">
    <div>
        <textarea rows="5" cols="50" onkeyup="return ismaxlength(this,125)"></textarea>
        <br />
        <label id='lblCaption' style="font-family:Tahoma;font-size:1em;font-weight:bold"></label>
    </div>
    </form>
</body>
</html>
Hope now you can apply maxlength property in textarea control.

Script tested for:
1. Internet Explorer
2. Mozilla Firefox
3. Opera
4. Google Chrome

0 comments:

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash