Skip to content

Instantly share code, notes, and snippets.

@savage69kr

savage69kr/index.html

Created September 24, 2012 12:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save savage69kr/3775644 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save savage69kr/3775644 to your computer and use it in GitHub Desktop.
Download ZIP
Input & Textarea Character Limit Display with jQuery
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinyLimiter - jQuery Character Limit Counter</title>
<link rel="stylesheet" href="tinylimiter.css">
<script>
<style>
body {padding-top:130px}
#scripinty {height:130px; width:100%; position:fixed; top:0px; left:0px; margin:0; background:#666; min-width:900px; z-index:9999}
#scripintyleft {float:left; padding:30px 0 0 35px}
#scripintyleft h1 {font:32px 'Trebuchet MS',Verdana; color:#fff; text-shadow:1px 1px #000}
#scripintyleft p {color:#aaa; font-size:16px; font-style:italic}
#scripintyleft p a {color:#eee; text-decoration:none}
#scripintyleft p a:hover {color:#fff}
#scripintyleft span {font:15px Arial,Verdana; color:#ddd; text-shadow:1px 1px #444}
#scriptinyright {float:right; padding:10px 15px 0; height:120px; width:300px; background:#555}
#bsap_aplink {float:right; font-size:10px; margin:0; padding:4px 0 0; color:#eee; text-shadow:none}
#bsap_aplink:hover {color:#fff}
body .one .bsa_it_ad {border:none; background:transparent; font-family:inherit; padding:0; margin:0; text-align:right}
body .one .bsa_it_ad .bsa_it_i {float:right; padding:0; margin:0 0 0 13px}
body .one .bsa_it_ad .bsa_it_i img {padding:0; border:none; margin-top:3px}
body .one .bsa_it_ad .bsa_it_t {padding:0; font-size:13px; color:#eee; text-shadow:1px 1px #444; margin-bottom:6px}
body .one .bsa_it_ad .bsa_it_t:hover {color:#fff}
body .one .bsa_it_p {display:none}
body .one .bsa_it_ad .bsa_it_d {font:12px Arial,Verdana; color:#ccc; text-shadow:#444 1px 1px}
</style>
</head>
<body>
<div id="scripinty">
<div id="scripintyleft">
<h1>TinyLimiter <span>jQuery Character Limit Counter</span></h1>
<p><a href="http://www.scriptiny.com/2012/09/jquery-input-textarea-limiter/">Click here</a> for details.</p>
</div>
<div id="scriptinyright">
<div id="bsap_1258634" class="bsarocks bsap_7328b2de3d880a0a405bba3907c7d5ab"></div>
</div>
</div><div id="wrapper">
<textarea id="text" maxlength="100" cols="50" rows="5" placeholder="Enter Text"></textarea>
<div id="chars">100</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.tinylimiter.js"></script>
<script>
$(document).ready( function() {
var elem = $("#chars");
$("#text").limiter(100, elem);
});
</script>
</body>
</html>
Raw
jquery.tinylimiter.js
/**
* TinyLimiter - scriptiny.com/tinylimiter
* License: GNU GPL v3.0 - scriptiny.com/license
*/
(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);
Raw
tinylimiter.css
* {margin:0; padding:0}
body {font:12px Verdana,Arial; color:#555; background:#222}
p {line-height:1.4; margin-bottom:12px}
#wrapper {width:578px; margin:75px auto}
/* TinyLimiter */
#text {width:558px; border:0; padding:10px; line-height:1.4; resize:vertical; font:12px Verdana,Arial}
#chars {margin-top:10px; color:#ccc}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment