Limit text length and add autoscrolldown in a textarea

using ajax and javascript to add functionality to textarea

Published Date : 11 Jun 2008

---

---

Introduction

Forms always require validation when they are used in any situation. One method is to verify the data submitted through POST or GET before actually executing the form action. Using Javascript it is possible to do this in a more simple way.

Main

Limit Text Length

Here you have an example of how you can limit the number of characters an user can insert into an input or a textarea field. This feature in my project textarea using AJAX scriptmanager and updatepanel.

In forms when using text boxes or text areas, it is always a good idea to limit the character length (usually needed for forms that submit data to a database). This javascript snippet is especially useful for textarea fields.

The following example shows how you can do this. This is a very simple idea to help the user limit the length of character. Do these small add-ons to your forms and they will function really professional.

We create a javascript function that counts the number of remaining characters and trims the string if the length is bigger that the maximum allowed value by adding onkeydown and onkeyup (text input field will call the javascript function every time a up or down key event will arise) attribute to the textarea. The attribute will then trigger a javascript to check whether character count is larger than 200 or not.

See the code below:

public partial class UserChat : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            txtReply.Attributes.Add("onKeyDown", "var limitField = 
document.getElementById('" + txtReply.ClientID + "');" +
                            "if (limitField.value.length > 200) " +
                            "{ limitField.value = 
limitField.value.substring(0, 200); }");
            txtReply.Attributes.Add("onKeyUp", "var limitField = 
document.getElementById('" + txtReply.ClientID + "');" +
            "if (limitField.value.length > 200) " +
            "{ limitField.value = limitField.value.substring(0, 200); }");
        }
    }
}

Append Autoscroll

Some time it is required that your text area is automatically scrolled down to the last line following your type.

Moreover, TextArea in asp.net doesn't has an auto scroll by default, it is your job to make these scroll bars 'auto scroll' when necessary.

Add autoscrolldown in a text area:

Javascript:

function ScrollBottom(id)
{
    var objDiv = document.getElementById(id);
    objDiv.scrollTop = objDiv.scrollHeight + 999999;   
}

Conclusion

This two function and behavior is highly desirable in cases when you're using your TextArea as a logging or chatting facility to your program.

---

Other Related and Popular Articles :

---

Author Profile : Hans Candra

Click here to view Author Profile

---

Comments

Leave New Comments