Membuat Text Counter / Limiter JQuery

Saya share snippet sederhana untuk membuat limiter text dengan menggunakan jQuery. Untuk demo klik tombol "Live Demo" di sebelah kanan :)

Atau klik link ini: http://jsfiddle.net/dvchtt33/

(function($) {
    $.fn.extend( {
        limiter: function(limit, elem) {
            $(this).on("keyup focus", function() {
                setCount(this, elem);
            });
            function setCount(src, elem) {
                var chars = src.value.length;
                if (chars > limit) {
                    src.value = src.value.substr(0, limit);
                    chars = limit;
                }
                elem.html( limit - chars );
            }
            setCount($(this)[0], elem);
        }
    });
})(jQuery);
var elem = $("#chars");
$("#text").limiter(100, elem);

 

HTML:

<textarea id="text" maxlength="100" cols="50" rows="5" placeholder="Enter Text"></textarea>
<div id="chars">asa</div>

About Author

Cecep Yusuf

Hi, my name is Cecep Yusuf. However, in the virtual world I am more likely to use the name Cheyuz, which is an abbreviation of two words "Cecep" and "Yusuf". I am founder of Jagocoding.com, u can view more of me in Cheyuz.id


Comment & Discussions

  • Cecep Yusuf
    Ada di sini gan: http://jsfiddle.net/dvchtt33/

  • sofyan waldy
    lihat hasil scriptnya gimana ya gan?

  • Please LOGIN before if you want to give the comment.