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