ansaurus

Question

Countdown available spaces in a textarea with jquery or other?

Answer 1

A:

Using jQuery, assuming that you have a textarea with id field that you wish to limit to 100 characters, and another element with id chars-remaining to display the number of available characters:

var max = 100;
$('#field').keyup(function() {
    if($(this).val().length > max) {
        $(this).val($(this).val().substr(0, max));
    }
    $('#chars-remaining').html((max - $(this).val().length) + ' characters remaining');
});

bryan 2009-08-09 06:09:33

Answer 2

+8 A:

Very simple in jQuery:

<textarea id="myTextarea"></textarea>
<p id="counter"></p>

<script type="text/javascript">
$('#myTextarea').keyup(function () {
    var left = 200 - $(this).val().length;
    if (left < 0) {
        left = 0;
    }
    $('#counter').text('Characters left: ' + left);
});
</script>

Substitute the 200 by whatever your limit is.

Note this does not limit the actual text input, it just counts down. You need to check server-side for the input length, this is just a visual helper.

As an aside, I don't think you even should try to limit the input length by denying any input when the limit is reached. It's a pain in the rear usability-wise and can't be relied upon anyway. A simple countdown and server-side checking is the best option IMHO.

deceze 2009-08-09 06:09:43

Answer 3

A:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function()
        {
            $('#TestId').keyup(function(e)
            {
                var maxLength = 100;
                var textlength = this.value.length;
                if (textlength >= maxLength)
                {
                    $('#charStatus').html('You cannot write more then ' + maxLength + ' characters!');
                    this.value = this.value.substring(0, maxLength);
                    e.preventDefault();
                }
                else
                {
                    $('#charStatus').html('You have ' + (maxLength - textlength) + ' characters left.');
                }
            });
        });
    </script>
</head>
<body>
    <textarea id="TestId" cols="20" rows="8"></textarea><br />
    (Maximum characters: 100)<br />
    <span id="charStatus"></span>   
</body>
</html>

Raghav Khunger 2009-08-09 10:17:18

Answer 4

A:

I used jQuery and the answer by deceze and then tweaked it to give me a twitter-style countdown so that users could see by how much they had gone over and adjust their text accordingly. I also put it into its own function so I could call it from another function that sometimes populated the textarea automatically:

    function reCalcToText() {
        var left = 200 - $('.toText').val().length;
        if (left < 0) {
            $('#counter').text(left);
            $('#counter').addClass("excess");
        } else {
            $('#counter').text(left);
            $('#counter').removeClass();
        }
    }
    function onReady() {
                  $('#<%= toText.ClientID %>').keyup(function() {
            reCalcToText();
        });
    };

Falkayn 2009-09-30 03:45:23

Answer 5

A:

I've used Aaron Russell's simply countable jQuery plugin with success

Simple usage:

$('#my_textarea').simplyCountable();

Advanced usage:

$('#my_textarea').simplyCountable({
    counter: '#counter',
    countable: 'characters',
    maxCount: 140,
    strictMax: false,
    countDirection: 'down',
    safeClass: 'safe',
    overClass: 'over',
    thousandSeparator: ','
});

Ryan McGeary 2010-01-26 00:11:58

thanks for the answer, I looking at many options but this plugin is really huge in size for such a simple task

jasondavis 2010-01-26 03:05:21

ansaurus

tags:

views:

answers:

Countdown available spaces in a textarea with jquery or other?

related questions