/**
- * jQuery byteLimit
+ * jQuery byteLimit plugin
*
- * @author Jan Paul Posma
+ * @author Jan Paul Posma, 2011
+ * @author Timo Tijhof, 2011-2012
*/
-( function( $ ) {
+( function ( $, undefined ) {
/**
- * Enforces a byte limit to a textbox, so that UTF-8 entries are not arbitrarily truncated.
+ * Enforces a byte limit to a textbox, so that UTF-8 entries are counted as well, when, for example,
+ * a database 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 ) {
-
- // Default to current attribute value
- if ( limit == null ) {
- limit = this.attr( 'maxLength' );
-
- // If passed, update/set attribute value instead
- } else {
- this.attr( 'maxLength', limit );
+ $.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;
}
- // Nothing passed and/or empty attribute, return without binding an event.
- if ( limit == null ) {
- return this;
- }
+ // The following is specific to each element in the collection
+ return this.each( function ( i, el ) {
+ var $el, elLimit;
+
+ $el = $( el );
- // 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.
+ // Default limit to current attribute value
+ // Can't re-use 'limit' variable because it's in the higher scope
+ // that affects the next each() iteration as well.
+ elLimit = limit === undefined ? $el.prop( 'maxLength' ) : limit;
+
+ // 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 ) {
+ $el.prop( 'maxLength', elLimit );
+ } else {
+ $el.removeProp( 'maxLength' );
}
- var len = $.byteLength( this.value );
-
- // limit-3 as this doesn't count the character about to be inserted.
- if ( len > ( limit-3 ) ) {
- e.preventDefault();
+ // Nothing passed and/or empty attribute, return without binding an event.
+ if ( elLimit === undefined ) {
+ return;
}
+
+ // Save function for reference
+ $el.data( 'byteLimit-callback', fn );
+
+ // We've got something, go for it:
+ $el.keypress( function ( e ) {
+ var val, len, charLen;
+ // 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 )
+ {
+ // A special key (backspace, etc) so don't interfere
+ return true;
+ }
+
+ 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 ) > elLimit ) {
+ e.preventDefault();
+ }
+ });
});
};
-
-} )( jQuery );
+}( jQuery ) );