Character counter in JavaScript

July 30, 2011 7 Comments

This is about creating a character counter for textarea and limit it accordingly. You may have seen this kinda stuff in some messaging site mostly in sites which provides SMS facilities. They limit us to enter only specified number of characters in text area. Also in some sites there are limitation on characters in comments. So this article will help you in building a similar thing which will look like below picture:

Character counter for text area in JavaScript

Step 1 create a text area for entering text and an input text box which will hold remaining character count.

<DIV>
     Character Remaining:
     <INPUT  disabled size="3" value="140" name="txtLen" id="txtLen">
     <br/>
     <TEXTAREA id="textArea" name="textArea" rows="7" value="" cols="50"></TEXTAREA>
</DIV>

Step 2 Add key events on text area to monitor character count in it:

<TEXTAREA id="textArea" onKeyDown="countChars()" onKeyUp="countChars()" name="textArea" rows="7" value="" cols="50"></TEXTAREA>

Step 3 Create JavaScript function to calculate length of text entered in text area and change input box’s value accordingly and if length goes beyond limit then substring text up to length limit:

function countChars() {
     var l = "140";
     var str = document.getElementById("textArea").value;
     var len = str.length;
     if(len <= l) {
          document.getElementById("txtLen").value=l-len;
     } else {
          document.getElementById("textArea").value=str.substr(0, 140);
     }
}

Step 4 Apply some CSS to it:

DIV{
   PADDING-RIGHT: 5px;
   PADDING-LEFT: 5px;
   FONT-WEIGHT: bold;
   BACKGROUND: #000000;
   PADDING-BOTTOM: 5px;
   MARGIN-LEFT: 0px;
   PADDING-TOP: 5px;
   color:#FFFF00;
}
INPUT{
   BORDER:#000000;
   FONT-WEIGHT: bold;
   FONT-SIZE: 12px;
   COLOR: #000;
   FONT-FAMILY: Tahoma;
   BACKGROUND-COLOR: #FFFF00;
}
TEXTAREA{
   FONT-WEIGHT: bolder;
   BACKGROUND-COLOR: #DDCC00;
   WIDTH:100%;
}

And its done. Hope this helps you.

Filed under Java Script Tagged with , , ,

Create tab view in java script

July 9, 2011 2 Comments

With the combination of div tag, style:display attribute of div tag and java script one can make a simple tab view which look something like as follow:

Following is the js code for that:

function tabChange(i) {
      for ( var j = 1; j <= 3; j++) {
           if (i == j) {
                document.getElementById("Page" + j).style.display = "block";
                document.getElementById("Tab" + j).className = "tabSelect";
           } else {
                document.getElementById("Page" + j).style.display = "none";
                document.getElementById("Tab" + j).className = "tab";
           }
      }
}

The html code:-

<div>
       <a id="Tab1" href="javascript:tabChange(1)">Tab 1</a><a id="Tab2" href="javascript:tabChange(2)">Tab 2</a><a id="Tab3" href="javascript:tabChange(3)">Tab 3</a>
</div>
<div id="Page1" class="box">
     First tab content.
</div>
<div id="Page2" style="display: none;">
     Second tab content.
</div>
<div id="Page3" style="display: none;">
     Third tab content.
</div>

And the css used in this example:

.tab {
    width: 105px;
    padding: 5px;
    color: #065fba;
    background: #f4f5f8;
    border: #e2e2e2 1px solid;
}
.tab:hover {
    background: #065fba;
    color: #f4f5f8;
}
.tabSelect {
    width: 800px;
    padding: 5px;
    background: #065fba;
    color: #f4f5f8;
    border: #e2e2e2 1px solid;
}
.box {
    width: 600px;
    margin-top:5;
    padding: 5px;
    background: #ffffff;
    border: #065fba 2px solid;
    height:600px;
}
a {
    color: #000000;
    text-decoration: none;
}

Filed under Java Script Tagged with ,

← Older posts

%d bloggers like this: