libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.forms.textinput.js

   1 /*
   2 * "textinput" plugin for text inputs, textareas
   3 */
   4
   5 (function( $, undefined ) {
   6
   7 $.widget( "mobile.textinput", $.mobile.widget, {
   8         options: {
   9                 theme: null,
  10                 initSelector: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input[type='time'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input[type='color'], input:not([type])"
  11         },
  12
  13         _create: function() {
  14
  15                 var input = this.element,
  16                         o = this.options,
  17                         theme = o.theme || $.mobile.getInheritedTheme( this.element, "c" ),
  18                         themeclass  = " ui-body-" + theme,
  19                         focusedEl, clearbtn;
  20
  21                 $( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" );
  22
  23                 focusedEl = input.addClass("ui-input-text ui-body-"+ theme );
  24
  25                 // XXX: Temporary workaround for issue 785 (Apple bug 8910589).
  26                 //      Turn off autocorrect and autocomplete on non-iOS 5 devices
  27                 //      since the popup they use can't be dismissed by the user. Note
  28                 //      that we test for the presence of the feature by looking for
  29                 //      the autocorrect property on the input element. We currently
  30                 //      have no test for iOS 5 or newer so we're temporarily using
  31                 //      the touchOverflow support flag for jQM 1.0. Yes, I feel dirty. - jblas
  32                 if ( typeof input[0].autocorrect !== "undefined" && !$.support.touchOverflow ) {
  33                         // Set the attribute instead of the property just in case there
  34                         // is code that attempts to make modifications via HTML.
  35                         input[0].setAttribute( "autocorrect", "off" );
  36                         input[0].setAttribute( "autocomplete", "off" );
  37                 }
  38
  39
  40                 //"search" input widget
  41                 if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
  42
  43                         focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield" + themeclass + "'></div>" ).parent();
  44                         clearbtn = $( "<a href='#' class='ui-input-clear' title='clear text'>clear text</a>" )
  45                                 .tap(function( event ) {
  46                                         input.val( "" ).focus();
  47                                         input.trigger( "change" );
  48                                         clearbtn.addClass( "ui-input-clear-hidden" );
  49                                         event.preventDefault();
  50                                 })
  51                                 .appendTo( focusedEl )
  52                                 .buttonMarkup({
  53                                         icon: "delete",
  54                                         iconpos: "notext",
  55                                         corners: true,
  56                                         shadow: true
  57                                 });
  58
  59                         function toggleClear() {
  60                                 setTimeout(function() {
  61                                         clearbtn.toggleClass( "ui-input-clear-hidden", !input.val() );
  62                                 }, 0);
  63                         }
  64
  65                         toggleClear();
  66
  67                         input.bind('paste cut keyup focus change blur', toggleClear);
  68
  69                 } else {
  70                         input.addClass( "ui-corner-all ui-shadow-inset" + themeclass );
  71                 }
  72
  73                 input.focus(function() {
  74                                 focusedEl.addClass( "ui-focus" );
  75                         })
  76                         .blur(function(){
  77                                 focusedEl.removeClass( "ui-focus" );
  78                         });
  79
  80                 // Autogrow
  81                 if ( input.is( "textarea" ) ) {
  82                         var extraLineHeight = 15,
  83                                 keyupTimeoutBuffer = 100,
  84                                 keyup = function() {
  85                                         var scrollHeight = input[ 0 ].scrollHeight,
  86                                                 clientHeight = input[ 0 ].clientHeight;
  87
  88                                         if ( clientHeight < scrollHeight ) {
  89                                                 input.height(scrollHeight + extraLineHeight);
  90                                         }
  91                                 },
  92                                 keyupTimeout;
  93
  94                         input.keyup(function() {
  95                                 clearTimeout( keyupTimeout );
  96                                 keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
  97                         });
  98
  99                         // Issue 509: the browser is not providing scrollHeight properly until the styles load
 100                         if ( $.trim( input.val() ) ) {
 101                                 // bind to the window load to make sure the height is calculated based on BOTH
 102                                 // the DOM and CSS
 103                                 $( window ).load( keyup );
 104
 105                                 // binding to pagechange here ensures that for pages loaded via
 106                                 // ajax the height is recalculated without user input
 107                                 $( document ).one( "pagechange", keyup );
 108                         }
 109                 }
 110         },
 111
 112         disable: function(){
 113                 ( this.element.attr( "disabled", true ).is( "[type='search'],:jqmData(type='search')" ) ?
 114                         this.element.parent() : this.element ).addClass( "ui-disabled" );
 115         },
 116
 117         enable: function(){
 118                 ( this.element.attr( "disabled", false).is( "[type='search'],:jqmData(type='search')" ) ?
 119                         this.element.parent() : this.element ).removeClass( "ui-disabled" );
 120         }
 121 });
 122
 123 //auto self-init widgets
 124 $( document ).bind( "pagecreate create", function( e ){
 125         $.mobile.textinput.prototype.enhanceWithin( e.target );
 126 });
 127
 128 })( jQuery );