jQuery Character limit | Lessoncup Programming Blog

Tuesday, 29 October 2013

jQuery Character limit

Today i am going to show you how to set the character limit to textarea or input box, the jquery providing a character limit plugin for that you can download it from jquery website. it is very easy to set the limit using .limit('integer','give any selector to display the count') method having two parameters.

HTML

take the textarea or inputbox box and give the ID or classname one span tag or paragraph tag to display the character count,

<textarea name="count" cols="" rows="" class="countbox"></textarea>
<span class="showcount"></span> character left.

Javascript

include the jquery library along with jquery limit plugin inside the head tag. now add the .limit() method Selector .countbox the limit method has two parameters first one is limit integer and second is the display the count you can give any tag selector here. 

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="jquery.limit-1.2.source.js"></script>

<script>

$(function(){

$('.countbox').limit('50','.showcount');

});

</script>

CSS

<style>

.countbox{width:500px;height:50px;padding:5px;border:solid #999 1px;resize:none;}

.showcount{ font-size:10px;}

</style>

Live Demo

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons