2 * jQuery byteLimit plugin
4 * @author Jan Paul Posma, 2011
5 * @author Timo Tijhof, 2011-2012
10 * Enforces a byte limit to a textbox, so that UTF-8 entries are counted as well, when, for example,
11 * a database field has a byte limit rather than a character limit.
12 * Plugin rationale: Browser has native maxlength for number of characters, this plugin exists to
13 * limit number of bytes instead.
15 * Can be called with a custom limit (to use that limit instead of the maxlength attribute value),
16 * a filter function (in case the limit should apply to something other than the exact input value),
17 * or both. Order of arguments is important!
19 * @context {jQuery} Instance of jQuery for one or more input elements
20 * @param limit {Number} [optional] Limit to enforce, fallsback to maxLength-attribute,
21 * called with fetched value as argument.
22 * @param fn {Function} [optional] Function to call on the input string before assessing the length
23 * @return {jQuery} The context
25 $.fn
.byteLimit = function ( limit
, fn
) {
26 // If the first argument is the function,
27 // set fn to the first argument's value and ignore the second argument.
28 if ( $.isFunction( limit
) ) {
33 // The following is specific to each element in the collection
34 return this.each( function ( i
, el
) {
39 // Default limit to current attribute value
40 // Can't re-use 'limit' variable because it's in the higher scope
41 // that affects the next each() iteration as well.
42 elLimit
= limit
=== undefined ? $el
.prop( 'maxLength' ) : limit
;
44 // If there is no (valid) limit passed or found in the property,
45 // skip this. The < 0 check is required for Firefox, which returns
46 // -1 (instead of undefined) for maxLength if it is not set.
47 if ( !elLimit
|| elLimit
< 0 ) {
51 // Update/set attribute value, but only if there is no callback set.
52 // If there's a callback set, it's possible that the limit being enforced
53 // is too low (ie. if the callback would return "Foo" for "User:Foo").
54 // Usually this isn't a problem since browsers ignore maxLength when setting
55 // the value property through JavaScript, but Safari 4 violates that rule, so
56 // we have to remove or not set the property if we have a callback.
57 if ( fn
=== undefined ) {
58 $el
.prop( 'maxLength', elLimit
);
60 $el
.removeProp( 'maxLength' );
63 // Save function for reference
64 $el
.data( 'byteLimitCallback', fn
);
66 // We've got something, go for it:
67 $el
.keypress( function ( e
) {
68 var val
, len
, charLen
;
69 // First check to see if this is actually a character key
71 // Based on key-event info from http://unixpapa.com/js/key.html
72 // jQuery should also normalize e.which to be consistent cross-browser,
73 // however the same check is still needed regardless of jQuery.
75 // Note: At the moment, for some older opera versions (~< 10.5)
76 // some special keys won't be recognized (aka left arrow key).
77 // Backspace will be, so not big issue.
79 if ( e
.which
=== 0 || e
.charCode
=== 0 || e
.which
=== 8 ||
80 e
.ctrlKey
|| e
.altKey
|| e
.metaKey
)
82 // A special key (backspace, etc) so don't interfere
86 val
= fn
!== undefined ? fn( $( this ).val() ): $( this ).val();
87 len
= $.byteLength( val
);
88 // Note that keypress returns a character code point, not a keycode.
89 // However, this may not be super reliable depending on how keys come in...
90 charLen
= $.byteLength( String
.fromCharCode( e
.which
) );
92 if ( ( len
+ charLen
) > elLimit
) {