resources/jquery/jquery.byteLimit.js

   1 /**
   2  * jQuery byteLimit plugin
   3  *
   4  * @author Jan Paul Posma, 2011
   5  * @author Timo Tijhof, 2011-2012
   6  */
   7 ( function ( $ ) {
   8
   9         /**
  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.
  14          *
  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!
  18          *
  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
  24          */
  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 ) ) {
  29                         fn = limit;
  30                         limit = undefined;
  31                 }
  32
  33                 // The following is specific to each element in the collection
  34                 return this.each( function ( i, el ) {
  35                         var $el, elLimit;
  36
  37                         $el = $( el );
  38
  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;
  43
  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 ) {
  48                                 return;
  49                         }
  50
  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 );
  59                         } else {
  60                                 $el.removeProp( 'maxLength' );
  61                         }
  62
  63                         // Save function for reference
  64                         $el.data( 'byteLimitCallback', fn );
  65
  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
  70                                 // being pressed.
  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.
  74
  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.
  78
  79                                 if ( e.which === 0 || e.charCode === 0 || e.which === 8 ||
  80                                         e.ctrlKey || e.altKey || e.metaKey )
  81                                 {
  82                                         // A special key (backspace, etc) so don't interfere
  83                                         return true;
  84                                 }
  85
  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 ) );
  91
  92                                 if ( ( len + charLen ) > elLimit ) {
  93                                         e.preventDefault();
  94                                 }
  95                         });
  96                 });
  97         };
  98 }( jQuery ) );