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 ( $, undefined ) {
   8
   9         /**
  10          * Enforces a byte limit to a textbox, so that UTF-8 entries are counted as well, when, for example,
  11          * a databae 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                         // Update/set attribute value, but only if there is no callback set.
  45                         // If there's a callback set, it's possible that the limit being enforced
  46                         // is too low (ie. if the callback would return "Foo" for "User:Foo").
  47                         // Usually this isn't a problem since browsers ignore maxLength when setting
  48                         // the value property through JavaScript, but Safari 4 violates that rule, so
  49                         // we have to remove or not set the property if we have a callback.
  50                         if ( fn === undefined ) {
  51                                 $el.prop( 'maxLength', elLimit );
  52                         } else {
  53                                 $el.removeProp( 'maxLength' );
  54                         }
  55
  56                         // Nothing passed and/or empty attribute, return without binding an event.
  57                         if ( elLimit === undefined ) {
  58                                 return;
  59                         }
  60
  61                         // Save function for reference
  62                         $el.data( 'byteLimit-callback', fn );
  63
  64                         // We've got something, go for it:
  65                         $el.keypress( function ( e ) {
  66                                 var val, len, charLen;
  67                                 // First check to see if this is actually a character key
  68                                 // being pressed.
  69                                 // Based on key-event info from http://unixpapa.com/js/key.html
  70                                 // jQuery should also normalize e.which to be consistent cross-browser,
  71                                 // however the same check is still needed regardless of jQuery.
  72
  73                                 // Note: At the moment, for some older opera versions (~< 10.5)
  74                                 // some special keys won't be recognized (aka left arrow key).
  75                                 // Backspace will be, so not big issue.
  76
  77                                 if ( e.which === 0 || e.charCode === 0 || e.which === 8 ||
  78                                         e.ctrlKey || e.altKey || e.metaKey )
  79                                 {
  80                                         // A special key (backspace, etc) so don't interfere
  81                                         return true;
  82                                 }
  83
  84                                 val = fn !== undefined ? fn( $( this ).val() ): $( this ).val();
  85                                 len = $.byteLength( val );
  86                                 // Note that keypress returns a character code point, not a keycode.
  87                                 // However, this may not be super reliable depending on how keys come in...
  88                                 charLen = $.byteLength( String.fromCharCode( e.which ) );
  89
  90                                 if ( ( len + charLen ) > elLimit ) {
  91                                         e.preventDefault();
  92                                 }
  93                         });
  94                 });
  95         };
  96 }( jQuery ) );