How To Display Real Time Characters Count Using JQuery?

Please check my code below. I want to display input characters number real time using jquery javascript. But problem is when i am doing it with 'textarea' it works but when i do sa

Solution 1:

Here is a working fiddle with combining your two events keyup and keydown into one line :-)

Your selector was wrong, text doesn't exist. So I call input[name="name"] instead to get the input by your name value:

$('input[name="name"]').on('keyup keydown', updateCount);

function updateCount() {
  $('#characters').text($(this).val().length);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name">
<span id="characters"><span>

Solution 2:

With "textarea" version you are selecting "textarea" by $('textarea').keyup(updateCount) and $('textarea').keydown(updateCount) nicely but with text input you are doing wrong to select input text.

I have fix it by placing a id called "foo" on input text. This should be working now.

<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
    <input type="text" id="foo" name="">
    <span id="characters"><span>
    
    	<script type='text/javascript'>
            $('#foo').keyup(updateCount);
            $('#foo').keydown(updateCount);
    
            function updateCount() {
                var cs = $(this).val().length;
                $('#characters').text(cs);
            }
        </script>

Solution 3:

If you want to get an input with the type text you must use a selector like this

$('input[type="text"]').keyup(updateCount);
$('input[type="text"]').keydown(updateCount);

Here is a list of all jQuery selectors

Solution 4:

You are not selecting the input field here.
Try the following

 $('input').keyup(updateCount);
 $('input').keydown(updateCount);

Solution 5:

Here you go with a solution https://jsfiddle.net/mLb41vpo/

$('input[type="text"]').keyup(updateCount);

function updateCount() {
    var cs = $(this).val().length;
    $('#characters').text(cs);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="">
<span id="characters"><span>

Mistake was $('text').keyup(updateCount);, you can refer input textbox using 'text'.

It should be $('input').keyup(updateCount);