Limit is a plugin for the javascript framework Jquery that limits the number of characters that can be entered in a textarea or input field. The plugin can also report the number of characters left before the user reaches the length limit.
Limit is a plugin for the javascript framework Jquery that limits the number of characters that can be entered in a textarea or input field. The plugin can also report the number of characters left before the user reaches the length limit.
How to use Limit
To use the full power of Limit you need two html elements; one textarea or input field and an element to show amount of characters left.
You have <span id="charsLeft"></span> chars left.
<textarea id="myTextarea"></textarea>
<script type="text/javascript">
$('#myTextarea').limit('140','#charsLeft');
</script>
If you don’t want to show the amount of characters left you can do like this.
<textarea id="myTextarea"></textarea>
<script type="text/javascript">
$('#myTextarea').limit('140');
</script>
| Version | Changes |
|---|---|
| 1.2 | Optimized timed function and fixed an issue with flickering text |
Comments
Make a comment
Projects
- Accordion (jQuery)
- Airport (jQuery)
- Defaultvalue (jQuery)
- Elastic (jQuery)
- Highlight (jQuery)
- Keycan
- Lazy (jQuery)
- Limit (jQuery)
- Password Strength (jQuery)
- Show Password (jQuery)
- Tabify (jQuery)
- Valid8 (jQuery)
Latest posts
- July 8th, 2009 Why are we typing passwords twice?
- July 5th, 2009 Don’t stop password masking; let the user decide
- June 1st, 2009 You can’t validate email addresses with regular expressions
- May 20th, 2009 Konami Code: Why so verbose, when you can make it in 140 characters?
- May 18th, 2009 Let your users know if Firebug slows down your web page.
Doesn’t work with IE7.
[...] jQuery Limit plugin é muito útil se você precisa cortar e limitar caracteres de textareas ou campos input. A utilização é muito simples, basta ficar atento a seguinte estrutura html: [...]
@Osman:
Ooups, you are right.
I updated the plugin with a bug fix.
nao funciona no IE 8
You sure? This page works for me in IE8: http://sandbox.unwrongest.com/jquery.limit/
Great plugin!
I found an anomaly with this in the Safari browser. The method of setting a timer was causing the character count to flash in an annoying way. I modified it and removed the timer so that it uses the “keypress” and “keydown” events (again because of browser differences). This is because safari 3.1 does not recognise the delete button as part of the keypress event.
This is my alternate implementation:
(function($){
$.fn.extend({
textlimit: function(limit,element) {
var self = $(this);
// this event is required for safari
$(this).keydown(function(){ substring(); });
// this event handler is required for firefox/gecko
$(this).keypress(function(){ substring(); });
function substring(){
var val = $(self).val();
var length = val.length;
if(typeof element != ‘undefined’)
$(element).html((limit-length limit)
$(self).val($(self).val().substring(0,limit));
}
substring();
}
});
})(jQuery);
Thank you very much for your fix. I will have a look at it.
This is great, I did read yours after I posted mine and we basically are doing the same thing. I feel better that someone else is thinking along the same line … Great job
The plugin have an error when you paste a text!.
In the oder hand thx you!!.
Not for me in FF3 Mac OS X. What browser are you using?
Fiz um botao de submit mas nao sei agora como é que a informacao da “textarea” fica no $this->data (estou a usar php).
Alguem me consegue explicar ? (ja tentei dar o nome “data” ao textArea mas nao da..)
Sorry, I don’t understand what you are trying o do.
All I can say is Excellent! And thanks. This really saved me some time
Thanks Craig! Happy to help. Just let me know if anything breaks or misbehaves.
Works better: http://andrewpeace.com/projects/textarea/
:-/
Not for me. That script doesn’t hinder the user from pasting more chars than the limit.
It does this when the textarea unfocuses. As is noted above, using an interval loop causes weird behavior in some browsers. An events-based implementation is also more convenient to accessibility, as the browser is able to detect that the event was denied.
If you are talking about the bug reported by Graeme then that issue was taken care of in 1.2. I have tested Limit in some really dodgy environments. Just now in a wine version of IE6 which is really slow, but Limit works well.
If you find Limit slow due to the loop you can always tweak the interval frequency.
In that case you can always combine the two. Just add a listener for keypress to mine or a loop to yours.
you are the one!
Hello there,
thanks for the nice plugin.
I have noticed a bug in the plugin when dealing with multi-character inputs. it is likely because that the input method allows multiple characters to be inserted at the same time, when i reached the proposed limit, My entire textarea got reset. all the previous input is lost.
Could you take a look at this issue?
thx,
Zhiyin
Hi zhiyin,
I would like to help you, but im not sure I understand what a multi-character input is.
Could you upload something where the problem/bug could be reproduced?
my skype id is zhiyin.pan,
if you have time, we can use teamviewer. so you can see what I am saying.
Thank you for this! It’s just what I’d been looking for.
This script is buggy in IE8.
Hello Jan,
Little bug when using Limit and DefaultValue on the same textarea :
When the default value is shown, chars left should show the maximum allowed chars, and not substract the default value’s length from it, since the default value should not count as text…
Hope this helps :)
Thanks, nice neat script that does as is called.
Hello,
Very nice plugin, but like a couple of others, I was unable to get your demo (this page) working in IE7 (build 7.0.5730.13) or IE8 (multiple machines, using build 8.0.6001.18702). Personally I loathe IE and its use should be punishable by death, but unfortunately many people drink the IE Kool-Aid and the powers that be have net yet passed my proposed legislation. This ultimately means that I cannot rely on a solution that does not work in IE. :-(
Do you have any plans to “fix” the Limit plugin to include support for IE? I say “fix” because IE is the issue, and the only appropriate fix is for IE to be wiped from existence. ;-)
I like the concept, so I built mine based on your concept:
function ValidateSize(_obj, _allowedsize)
{
if($(“#” + _obj).val().length <= _allowedsize)
{
LIMIT_CHAR = false;
$(“#limit”).html(‘Maximum allowed characters ‘ + _allowedsize);
$(“#” + _obj).removeClass(“error”);
return false;
}
else
{
LIMIT_CHAR = true;
$(“#” + _obj).addClass(“error”);
$(“#” + _obj).val($(“#” + _obj).val().substring(0, _allowedsize));
$(“#limit”).html(‘Allowed number of characters reached.’);
return false;
}
}
Plug the ValidateSize in the onkeyup or onkeypress event of the object you need to limit.