Character Count online tool, get JavaScript function count:codingtuting

Count your character with the help of an easy tool of CodingTuting. And learn How to Create Character Count Tool for our Website.

Character Count Online Tool in JavaScript

Character Count with Space | JavaScript Function Tool

Sometimes we need to type and submit our content on any website. And many websites have a fixed limit of character. We can't write more than limit. And some websites don't show the number of characters which we type at that time.

So we start to count our character manually while typing, which is so annoying. Today we'll make our own tool fo Character Count with Space. So Welcome Back to the CodingTuting with Jignesh Panchal

Friends I hope you like our last post which was on Pricing Table in CSS with Cool Animation. If you haven't check it - so please check it by Click here. Believe me, it is an awesome creation.

Let's move ahead towards today's creation.

Basically today we are going to learn JavaScript onKeyup and JavaScript onPaste Event. We'll create a function for character count and call that function using onKeyup and onPaste event.

Preview of Character Count Tool

Focus on the source code

As you know, I always give a summary of the source code before share it. See How I did this? Don't be hurry for source code.

I'm using Google Fonts in my code. You can use it too or any others as you like.

I created a basic structure using HTML and gave descriptive class names for CSS.
I applied styles on the page using CSS.
After completing the full design I placed onKeyup and onPaste event in <textarea> field.
I called the appropriate JavaScript function while fired the onKeyup and onPaste event.
Also I've used window.onload = function() for autometic focus on the <textarea> on page load.

CharacterCount.html

<!--Code by CodingTuting.Com Jignesh Panchal-->
<!DOCTYPE html>
<html>
    <head>
        
        <title>Character Count</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link href="https://fonts.googleapis.com/css?family=Lato|Nanum+Gothic:700|Raleway&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="StyleCharacterCount.css"/>        

    </head>

    <body>
        
        <div class="characterCounter">

            <div class="char-heading">
                <h1>Count Your Characters</h1>
            </div>

            <div class="counter-area">
                <span id="total-char">0</span>

                <textarea id="type-char" rows="10" onpaste="onPasteCounter()" onkeyup="charCount()" placeholder="Type Your Characters Here..."></textarea>
            </div>
        </div>        
        
        <script src="ScriptCharacterCount.js"></script>

    </body>
</html>

StyleCharacterCount.css

/*Code by CodingTuting.Com Jignesh Panchal*/
body {
    margin:0;
}

.characterCounter {
    text-align: center;
}

    .characterCounter .char-heading {
        padding: 20px;
        text-align: center;
        font-family: 'Nanum Gothic', sans-serif;
        font-size: 25px;
        text-transform: uppercase;
        letter-spacing: 4px;
        color: crimson;
    }

    .characterCounter .counter-area {
        width: 55%;
        margin-left: auto;
        margin-right: auto;
    }

        .characterCounter .counter-area textarea#type-char {
            outline: none;
            padding: 15px;
            width: 90%;
            font-size: 20px;
            font-family: 'Lato', sans-serif;
            color: #717171;
            border-color: #9c9c9c;
            border-radius: 4px;

            -webki-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            -o-transition: all .4s ease-in;
            transition: all .4s ease-in;
        }

        .characterCounter .counter-area textarea#type-char:focus {
            border-color:indigo;
            box-shadow: 0 0 5px indigo;
        }

        .characterCounter .counter-area #total-char {
            display: block;
            font-size: 35px;
            font-family: 'Raleway', sans-serif;
            padding: 0 0 35px;
            color: indigo;
        }

/* Media Querie */
@media only screen and (max-device-width: 768px) {
    .characterCounter .char-heading {
        padding: 20px;
        font-size: 18px;
    }
    
    .characterCounter .counter-area {
        width: 90%;
    }
}

ScriptCharacterCount.js

/*Code by CodingTuting.Com Jignesh Panchal*/
window.onload = function() { 
    document.getElementById("type-char").focus();
}

function charCount() {
    var charStr = document.getElementById("type-char").value;
    var nChar = charStr.length;
    document.getElementById("total-char").innerHTML = nChar;
}

function onPasteCounter() {
    window.setTimeout(function(){charCount();},10)
}

I hope you got - How To Create Character Count Tool using JavaScript. Add this Character Count in Word Tool on your website and attract visitors to visit your site. You can change the colors of the tool like your website theme.

Please read our more articles on Web Design and all. If there is any bug in this tutorial please let us know in the comment.

We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please do comment.

Sharing is Caring

Thanks for Reading

Keywords & Queries covered in this tutorial are:

Author : Jignesh Panchal

Hi, I'm Jignesh Panchal. I'm a Web Developer & Designer. I've started this blog to help the programmers using my experience and skills. You will get solutions and tips about Programming, Web Development etc.

Character Count online tool, get JavaScript function count