resources/jquery/jquery.byteLimit.js

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