Skip to main content

Count characters in a textarea using javascript



Introduction:

In this article I am going to explain the code for counting and displaying the number of characters in a textbox or textarea using javascript.


Description:


My requirement is to  count the characters in a textbox at runtime and restrict the number of characters. For that first i am creating a textbox.

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <font size="1" face="arial, helvetica, sans-serif">Only 50 characters allowed!
            <input id="text" type="text" size="40" onkeydown="CountLeft(this.form.text,this.form.left,50);"
                onkeyup="CountLeft(this.form.text,this.form.left,50);">
            <input readonly type="lab" id="left" size="3" maxlength="3" value="50">
            characters left</font>
    </div>
    </form>
</body>
</html>

In the above code i have created a html textbox and a label. While entering text in textbox the label show the number of characters. For counting the no of characters i have a javascript function "CountLeft" which is called on  onkeydown and  onkeyup events because we have to count the no of characters while entering the characters in the textbox and also while erasing the characters. Below is the javascript code.


<script type="text/javascript">
    function CountLeft(field, count, max) {
        // if the length of the string in the input field is greater than the max value, trim it
        if (field.value.length > max)
            field.value = field.value.substring(0, max);
        else
        // calculate the remaining characters
            count.value = max - field.value.length;
    }
</script>


Thus the above javascript function counts the number of characters in the textarea on both the onkeydown and onkeyup  events. And if the count goes above 50 then it will restrict the characters.

Comments

Popular posts from this blog

Code To Convert rupees(numbers) into words using C#.Net

Introduction: In my previous article I have explained about how to validate emailid using javascript . In this article I am going to explain about code used to convert rupees(numbers) into words using C#.Net . Explanation: For explanation purpose I have a page. It has a textbox to input the numbers. And when you click on the convert to words button then it will convert the input numbers into words and shows it in the below label. Below is the C# code used to do this functionality. public static string NumbersToWords( int inputNumber) {     int inputNo = inputNumber;     if (inputNo == 0)         return "Zero" ;     int [] numbers = new int [4];     int first = 0;     int u, h, t;     System.Text. StringBuilder sb = new System.Text. StringBuilder ();     if (inputNo < 0)     { ...

C# Extension Methods Example

In this article i am going to explain about Extension Methods  with example. Extension methods enable you to "add" methods to existing types without creating a new derived type, recompiling, or otherwise modifying the original type. Extension methods are a special kind of static method, but they are called as if they were instance methods on the extended type. For client code written in C# and Visual Basic, there is no apparent difference between calling an extension method and the methods that are actually defined in a type. If you do implement extension methods for a given type, remember the following points: An extension method will never be called if it has the same signature as a method defined in the type. Extension methods are brought into scope at the namespace level. For example, if you have multiple static classes that contain extension methods in a single namespace named Extensions, they will all be brought into scope by the using Extensions; directive. ...

VBScript equivalent string functions in C#.Net

C# Method VBScript Description IndexOf() InStr Returns the position of the first occurrence of one string within another. The search begins at the first character of the string - InStrRev Returns the position of the first occurrence of one string within another. The search begins at the last character of the string ToLower() LCase Converts a specified string to lowercase SubString() Left Returns a specified number of characters from the left side of a string Length() Len Returns the number of characters in a string TrimStart() LTrim Removes spaces on the left side of a string TrimEnd() RTrim Removes spaces on the right side of a string Trim() Trim Removes spaces on both the left and the right side of a string SubString() M...