Maxlength with jQuery

Funktionen skär bort överstigande tecken så att de blir tio men arean är fortfarande röd. Förslag: rödmarkeringen gäller vid maxlängd +1.

Hi,

I've run your script through jslint.com and fixed some errors (one of which was causing errors in IE6 & 7).

Please email me on the supplied address if you'd like me to send the modified version.

Regards,

Tim

hello,

your code doesnt resolve problem with pasting from clipboard.
put some text in clipboard and press Ctrl+V in these textarea - counter isnt working :)

Can you please tell me how to show how many characters are left before textarea?

Version 1.0.3 has a bug that occurs only in IE.
the presence of a comma (,) is a bug in IE. This is a very popular bug :)

Just change line 24
slider: false, // Use counter slider
to
slider: false // Use counter slider

Thank you. It's working nicely, however I've got one problem.

Say I've written the following:

[img]test[/img]

This will result in 5+4+6 = 15 chars. I only want it to count the 4 chars. Same goes when creating links etc, etc. I assume this is some regular expressions, or?

Can it be made so that one can pass in a method pointer when the input field content has exeeded the limit? (I'd like to disable the submit button when that happens)

Other than that I really like this script. Kudos!

This plugin not support drag-and-drop text into control.

It would really help if you mentioned somewhere in this documentation how to specifiy the max amount of characters. It defaults to 10 chars, but you don't mention how to change this value :) I had to look in your code to find out that there is a "maxCharacters:" setting.

As Bas said, nowhere on this page is the most crucial information, setting the limit of characters.

For anyone interested, here is the javascript call for 135 chars
$('#content').maxlength({maxCharacters:135});

Looking through the un-minimized js will also give info on the other available options.

Great plugin, cheers - just a little lacking in documentation

Complete options:

- events: array
ex.: ['onFocus'] - resolves the problem with pasting from clipboard
- maxCharacters: int
ex.: 135 - max. of 135 chars
- status: bool
ex.: false - disables the chars left message
- statusClass: string
ex.: 'myStatusCssClass' - own CSS class for the status message
- statusText: string
ex.: 'Zeichen übrig' - for localization of status message
- notificationClass: string
ex.: 'myNotificationCssClass' - own CSS class to be binded to the textarea/input field if max chars exceeded
- showAlert: bool
ex.: true - shows a javascript alert box
- alertText: string
ex.: 'Du hast zu viele Zeichen eingegeben' - for localization of the JS alert box
- slider: bool
ex.: true - slide in/out the status message

to solve drag-drop : add change event
events: ['change']

blur works as well.

I noticed a but with the textarea that uses alert box, you can't get rid of the alert box, just pops up again and again and again becase the text in the textarea if over the limit.

replacing lines 29 and 30 with the following will read the 'maxlength' attribute from the source element, if present, and use that instead of having to specify the 'maxCharacters' in the options.

var item = $(this);
var charactersLength = item.val().length;

var maxlengthAttr = item.attr('maxlength');
if (maxlengthAttr) {
    settings.maxCharacters = maxlengthAttr;
}

Funny thing, I've seen literally dozens of plugins for enforcing maxlength on a textarea, and ALL of them, including yours, suffer from the same weakness: if you exceed the imposed maxlength while typing somewhere **in the middle** of the control, then the *last* character in the control is deleted instead of the one you just typed.

The Holy Grail is:

1) prevent content from exceeding maximum length
2) if characters need to be discarded:
* discard characters from the end of *added* text, not from the end of content
* if multiple characters are pasted, the final state of the control must be the same as if the text were typed one character at a time. By state I mean content, caret position, and scroll position.

The problem mostly reduces to getting and setting caret position in a textarea reliably across browsers. It is a hellishly difficult task!

Denna plugin är riktigt bra. Tack för att du gjorde det.

Hi, this plugin is excellent.

I would make one change however - The notification class should replace the status class when the max length is reached (i.e. restyling the status div).

@Emil, thanks but I have decided to simply not use that class at all.

Hi Emli,

the plugin doesn't work with copy and paste. How can I prevent that?

Emil, instead of doing a keyup, why not do something more like an on blur event? Perhaps that will solve the copy and paste, in some way? This is just from the top of my head, so I'm not positive at all :)

Do you have a solution for the ENTER key? Press ENTER once in your textbox. The plugin will show that you have only used 1 character. However, when you submit the form, asp.net shows that the string has a length of 2.

It looks like it has to do with the way the val().length works in jQuery. val().length will return one character if you have an ENTER, however, .value.length will return 2.

IE sees ENTER as both LINE-FEED and CARRIAGE-RETURN. Firefox sees it as just LINE-FEED. This is just a browser issue that we will have to deal with. Thanks to the following page for info about LINE FEED and CARRIAGE RETURN: http://www.maxi-pedia.com/Line+termination+line+feed+versus+carriage+ret...

what about multibyte characters? Korean, Chinese, Japanese... It recognize two-byte one character as one byte... It is natural that it should recognize two-byte chanracter as two bytes.

Muchas gracias es lo que estaba buscando

Perfecto, mil gracias.

Hello, I wanted to use this script in combination with the jquery validation plugin. My problem was, that the wrong element was used. So I changed two pieces of the code like this:

function D() {
var K = C.maxCharacters - J;
if(K < 0) {
K = 0
}
G.nextAll("div." + C.statusClass + ":first").html(K + " " + C.statusText)
}

if(C.slider) {
G.next("div." + C.statusClass).hide();
G.focus(function() {
G.nextAll("div." + C.statusClass + ":first").slideDown("fast");
});
G.blur(function() {
G.nextAll("div." + C.statusClass + ":first").slideUp("fast");
})
}

The nextAll function is a little bit slower than the next function, but in this case I think the best choice.

Can you update this plugin to support double byte characters like IME content for Japanese or Chinese etc. I tested this demo web page with Japanese keyboard, and there are issues. For example, if user keeps typing text larger than given max length then the plugin deletes extra characters but somehow also replaces the characters within the boundary.

Hi all...
Very Good Code with User Friendly UI.
The only Problem is that this code is not working with the pages that have Master Pages.
Status Dive is not appearing there. Any solutions??

When pasting it is accepting the input.