Input Limiter

Input Limiter

Overview

This jQuery plugin will allow you to limit input into form fields. It can display a message as the user types to let them know how many characters they have remaining.

Use
Options
Demonstration
Download
Source

Found a bug? Enter a New Issue

Use

jQuery is required to use this plugin.

Examples:

Limit all textareas to the default limit of 255 characters:

$(function() {
	$('textarea').inputlimiter();
});

Specify a limit or 100 characters:

$(function() {
	$('textarea').inputlimiter({limit: 100});
});

More advanced examples can be found on the demonstration page.

Options

limit
Type: Integer
Default: 255

Controls how many characters the Input Limiter will allow the user to type into the field it is attached to. Once the limit is reached the user’s input will be truncated.

boxAttach
Type: Boolean
Default: true

Determines whether the box containing the Input Limiter remText and limitText will attach itself to the bottom the field that is in focus.

boxId
Type: String
Default: ‘limiterBox’

Determines the id that will be assigned to the box that will display the remText and limitText.

boxClass
Type: String
Default: ‘limiterBox’

Determines the class that will be attached to the box (boxId) that will display the remText and limitText.

remText
Type: String
Default: ‘%n character%s remaining.’

This string displayed the remaining characters. It will be updated as the user types into the input. Using the default remTextFilter; %n will be replaced with the number of characters remaining, %s a plural ‘s’. The %s will be replaced by the letter ‘s’ except when %n is equals to 1, then %s will return nothing. If zeroPlural is set to false this will also return nothing when %n is equal to 0.

remTextFilter
Type: Function
Default:

function (opts, charsRemaining) {
	var remText = opts.remText;
	if (charsRemaining === 0 && opts.remFullText !== null) {
		remText = opts.remFullText;
	}
	remText = remText.replace(/\%n/g, charsRemaining);
	remText = remText.replace(/\%s/g, (opts.zeroPlural ? (charsRemaining === 1 ? '' : 's') : (charsRemaining < = 1 ? '' : 's')));
	return remText;
};

This function gets two arguments passed to it: the options, and the remaining characters. By Default this function replaces ‘%n’ with the characters remaining and ‘%s’ with the letter ‘s’ when charsRemaining is anything but ’1′.

remTextHideOnBlur
Type: Boolean
Default: true

Controls whether the remText is displayed after the input loses focus. The limitText will still be displayed. This option only applies if attachBox is false, otherwise the boxId will be hidden when the field loses focus.

remFullText
Type: String
Default: null

This string is displayed when the remaining characters is equals to zero. If this string is null remText will be displayed.

limitTextShow
Type: Boolean
Default: true

Determines whether the limitText will be displayed after the remText.

limitText
Type: String
Default: ‘Field limited to %n character%s.’

Text that informs the user about the limit. Using the default limitTextFilter; %n will be replaced with the number of characters thje field is limited to, %s adds a plural ‘s’. The %s will be replaced by the letter ‘s’ except when %n is equals to 1, then %s will return nothing.

limitTextFilter
Type: Function
Default:

function (opts) {
	var limitText = opts.limitText;
	limitText = limitText.replace(/\%n/g, opts.limit);
	limitText = limitText.replace(/\%s/g, ( opts.limit == 1?'':'s' ));
	return limitText;
};

This function gets one argument passed to it: the options. By Default this function replaces ‘%n’ with the limit and ‘%s’ with the letter ‘s’ when the limit is anything but ’1′.

zeroPlural
Type: Boolean
Default: true

Determines if the ‘%s’ will be populated with the letter ‘s’ when the characters remaining is equal to zero. If this is true ‘%s’ will be populated with an ‘s’ when the remaining characters is equal to zero. If this option is false the ‘%s’ will not be populated when the remaining characters is equal to zero.

allowExceed
Type: Boolean
Default: false

Determines whether the user is allowed to keep entering more characters after they have reached the limit. By default the option stops the user from typing when they reach the limit. If this option is set to true they will be able to type past the limit. When the limited is exceeded the remaining text will display a negative number indicating how many character they are over.

useMaxlength
Type: Boolean
Default: true

If this option is set to true the maxlength attribute of the element will be used. If a limit is specified in the options the limit passed will override the maxlength attribute. If no limit option is passed it will use the limit from the maxlength attribute.

limitBy
Type: String
Default: ‘characters’

Gives you the ability to limit a field either by characters or by words. The only valid values for this option are ‘characters’ and ‘words’.

lineReturnCount
Type: Integer
Default: 1

This gives you the ability to count new lines as more than one character. If your system is storing a new line as two characters in your database you can use this option, by setting lineReturnCount to 2 it will count all line returns as two characters.

34 Comments

  1. xiaole
    Posted January 4, 2010 at 19:32 PM | Permalink

    remText = remText.replace(/\%s/g, ( charsRemaining == 1?”:’s’ ));
    should be
    remText = remText.replace(/\%s/g, ( charsRemaining <= 1?'':'s' ));

    so the remtext can be "0 char", "1 char", "2 chars", "3 chars"….

  2. Posted January 5, 2010 at 00:38 AM | Permalink

    Actually… it is currently correct for English, it should be: “0 characters remaining.”

    “the plural form is used for zero or more than one, and the singular for one thing only” source: http://en.wikipedia.org/wiki/Plural#Zero

    An idea might be to display separate text for when there is no characters remaining so you could display a custom message stating that the field is full. That way you could also display the plural for languages that used plural for zero.

  3. Posted January 8, 2010 at 17:42 PM | Permalink

    I have updated the plugin to allow you to show 0 char instead of 0 chars, just set the zeroPlural option to false. There is an example of this on the demo where I’m displaying the limit text in French.

  4. koral
    Posted April 11, 2010 at 14:40 PM | Permalink

    It doesn’t init properly when textarea has some text inside.

  5. Locke
    Posted April 16, 2010 at 05:06 AM | Permalink

    Hey man, great plugin, very useful!

    However I found a bug. In my application I use the sum of the length of the text of two inputs to calculate the limit to use in a third input text, the one with this plugin enabled.

    I have bound two onblur events on these two inputs so that when the user left them, the new limit is calculated and a call to:

    $(“input[name='third']“).inputlimiter({limit: limit});

    is issued to impose the new limit.

    This work fine except when the new limit is GREATER of the previous limit used. The carachters count is okay, but I’m not allowed to type any more characters even if the count says “you have 1 character left”.

    In the case when the new limit is SMALLER of the previous, both the count and the type limiter work as expected.

    I’d be grateful if you’ll find some time to look into the problem,
    thank you very much.

  6. Posted April 21, 2010 at 08:59 AM | Permalink

    Locke, this problem should be fixed now. I released a new version 1.2.1 with the fix included.

  7. Locke
    Posted April 21, 2010 at 09:02 AM | Permalink

    It appears to be working now, thanks :)
    I’ll let you know if something pops up later on.

  8. Posted May 28, 2010 at 11:51 AM | Permalink

    I removed like 40:

    $(this).unbind();

    Because it destroys other bindings that I have on the same input box.

    Maybe this should be optional? Or properly chain other events?

  9. Locke
    Posted May 28, 2010 at 13:16 PM | Permalink

    Instead without it, it caused the plugin do not work properly if re-initialized mutiple times without reloading the page. (see my post above dated April 16th)

  10. tom
    Posted February 10, 2011 at 20:32 PM | Permalink

    Hey, Can you guys help a newbie out?
    I cant even get out of the gate. I keep getting a textarea.inputlimiter is not a function error

  11. Posted February 11, 2011 at 08:17 AM | Permalink

    Tom, I’d be glad to help you out. Please send me a link to the page you’re trying to implement the input limiter on.

  12. Thomas
    Posted August 18, 2011 at 03:37 AM | Permalink

    Hi,

    great plugin, thank you.

    It is possible to use the HTML-Attribute “maxlength” as the default value for the limit?

    I put this in line 32 (after “var opts = …”), works fine.

    if ($(this).attr(‘maxlength’) && options != undefined && !options.limit) {
    opts.limit = $(this).attr(‘maxlength’);
    }

    Thanks
    Thomas

  13. Posted August 18, 2011 at 11:24 AM | Permalink

    Yes, I can add this in the next version.

  14. Thomas
    Posted August 29, 2011 at 01:55 AM | Permalink

    Hi Rusty,

    thank you.

    The if-statement I proposed was wrong.
    Heres a working one:
    if ($(this).attr(‘maxlength’) && ((options != undefined && !options.limit) || options == undefined )) {

    Thank you
    Thomas

  15. Joseph
    Posted February 16, 2012 at 22:03 PM | Permalink

    Hi,
    Need help in utilizing this plugin. I managed to make it work in one of my text fields However Im not too sure how to do it with a class (which is used by my textareas), although limit is enforced, I can’t see the limittext

    $(‘#message’).inputlimiter({ limit: 300, remText: ‘%n characters remaining’, });

    The id’s of both text area (and supposedly the span where the message will show is dynamically created – thats why im using class)

  16. Posted February 16, 2012 at 22:33 PM | Permalink

    Joseph, the class selector in jQuery uses a period. # is for selecting by id. To select all textareas with a class of “message” you could use the following code: $(‘.message’).inputlimiter({ limit: 300 });

  17. Joseph
    Posted February 16, 2012 at 23:09 PM | Permalink

    Hi Rusty,
    Thanks for the Ultra fast comment. Yeah I actually posted the wrong code … that one is working properly. Im getting the text just below the textbox.
    Here’s the one thats not working
    $(‘.txtMessage’).inputlimiter({
    limit: 300,
    remText: ‘%n characters remaining’,
    });

    Here’s how my text area looks like
    <textarea class="txtMessage" id="txtMessage_”

    It is able to limit the text but can’t seem to show remText – please note I haven’t declared any span to contain the remText (didnt create one for the working textbox either)

  18. Posted February 17, 2012 at 09:25 AM | Permalink

    Joseph, you do not need to create the box that contains the remText, that happens automatically. I tested your scenario and it’s working fine for me. See an example at: http://jsfiddle.net/rustyjeans/FvrYw/

  19. Joseph
    Posted February 19, 2012 at 20:33 PM | Permalink

    Hi Rusty,
    Thanks for the effort on this. Finally found the problem. I just realized Im trying to limit textbox in a popup (i.e z-index>0). Unfortunately I have indicated a z-index of 8000 in my elements and limittext seems to be defaulting to z-index 2000 – which puts it behind the elements. I just lowered my z-index so now its displaying nicely

  20. Posted February 19, 2012 at 21:15 PM | Permalink

    Joseph, glad you figured it out!

  21. Joseph
    Posted February 20, 2012 at 17:42 PM | Permalink

    Hi Rusty,
    Just wanted to verify – use of the plugin is free (as in beer) right? Sorry can’t find any license text :(

  22. Posted February 21, 2012 at 08:58 AM | Permalink

    Yes, it’s free! You can see the license at the top of the non-minified version of the script.

  23. Posted April 14, 2012 at 16:31 PM | Permalink

    Hi Rusty,
    For conveniance reasons, I tried to have multiple fields limited with a class for selector and different limit. I used the attribute maxLength that I set each time. But instead of using Thomas method (which repose on modify the core of your plugin and which doesn’t work for me with multiples elements), I used jQuery “each” function:
    $(‘.lim’).each(function(key, element){
    var eLimit = $(element).attr(‘maxlength’);
    $(element).inputlimiter({
    limit: eLimit,
    remText: ‘%n caractère%s restant%s.’,
    limitText: ‘Champ limité à %n caractère%s.’
    });
    });
    Hope it helps someone else ;)

  24. Webber
    Posted May 7, 2012 at 09:13 AM | Permalink

    Hi,

    I Probably found a minor glitch.

    If you try to type a number in an input text field that reached the maximum chars number, you can not do it even if you selected the entire text inside.
    You can do it if you type a lowercase letter, but you can’t if you try to type a number.

    This is a big problem with some fixed lenght numeric fields. For example an Area Code field is a 3 chars long numeric field.

    If you enter it, and it’s already filled, you can’t type any number even if you should replace the entire string with the numeric char you typed, since the text inside is selected.
    The same problem happens even typing an uppercase char, instead of a number.

    I think the problem is somewhere in this line of code, but I can’t find where :) :

    if(!opts.allowExceed&&(!e.keyCode||(e.keyCode>46&&e.keyCode=opts.limit){return false;}

    Thanks in advance for your help.

  25. Posted May 30, 2012 at 00:51 AM | Permalink

    Webber, this issue should be fixed in version 1.3. Let me know!

  26. Kamui
    Posted July 12, 2012 at 14:21 PM | Permalink

    @Pierre
    http://rustyjeans.com/jquery-plugins/input-limiter#comment-3098

    Thanks a lot dude !!!!

  27. Posted July 12, 2012 at 14:26 PM | Permalink

    In the latest version of the input limiter if you do not specify a limit in inputlimiter options, it will look for the maxlength attribute and apply that to the limit.

  28. Jannis
    Posted August 10, 2012 at 02:42 AM | Permalink

    Hey Rusty,
    nice plugin, thanks!

    We found a little problem with the count of new lines:

    We have a large textarea allowing 4000 characters. When I enter a Text with 4000 characters (and 36 new lines) the script tells me its 4000 characters while the database tells me there are 4036 chars. This might be because of different counting of newline+carriage return.

    Could you add an option to count new lines as 2 characters? That would help alot.
    Regards

  29. Posted August 10, 2012 at 12:44 PM | Permalink

    Thanks for the feedback! I have updated the code, in version 1.3.1 there’s an option called lineReturnCount. If you set this to 2 it will count your line returns as two characters. You can do this by passing the option in: $('textarea').inputlimiter({ lineReturnCount: 2 }); or, if you have multiple inputs, you can override the default value by placing this line before you call .inputlimiter(): $.fn.inputlimiter.defaults.lineReturnCount = 2;

  30. Jannis
    Posted August 13, 2012 at 06:20 AM | Permalink

    Thanks for implementing! While typing it works perfectly but when pasting more than the allowed chars from the clipboard the lineReturnCount is ignored :-/

  31. vikas
    Posted December 2, 2012 at 11:45 AM | Permalink

    Hi, I want to know How can I apply input limiter on dynamically added elements. I am adding form fields dynamically but input limiter is not working on them, I even called the method .inputlimiter after adding the element, but its not working, any help would be appreciated

  32. notbenj
    Posted September 26, 2013 at 01:52 AM | Permalink

    The doc says that allowExceed will make characters left being negative if you exceed the limit.
    However, the number of characters left stays at 0 when I exceed the limit.
    Is there a way to have negative value?

  33. scott mc
    Posted September 6, 2014 at 11:52 AM | Permalink

    I was wondering if the script could be adapted to also notify about a minimum length?

    So that at first it would say, “There is a X character minimum on this field. You only have Y characters” until the minimum was meant. Then it would switch over to the maximum allowed.

    This would be triggered by values for minimum and/or maximum.

    Let me know if this is possible.

    Thanks

  34. Posted September 18, 2014 at 12:15 PM | Permalink

    I read a lot of interesting posts here. Probably you spend a lot of time writing,
    i know how to save you a lot of work, there is an online tool that creates readable,
    google friendly posts in minutes, just search in google – laranitas free content source

Post a Comment

Your email is never shared. Required fields are marked *

*
*
*