libs/js/jquery-mobile-1.2.0/js/widgets/forms/textinput.js

   1 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
   2 //>>description: Enhances and consistently styles text inputs.
   3 //>>label: Text Inputs & Textareas
   4 //>>group: Forms
   5 //>>css.structure: ../css/structure/jquery.mobile.forms.textinput.css
   6 //>>css.theme: ../css/themes/default/jquery.mobile.theme.css
   7
   8 define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", "../../jquery.mobile.degradeInputs", "../../jquery.mobile.buttonMarkup", "../../jquery.mobile.zoom"  ], function( $ ) {
   9 //>>excludeEnd("jqmBuildExclude");
  10 (function( $, undefined ) {
  11
  12 $.widget( "mobile.textinput", $.mobile.widget, {
  13         options: {
  14                 theme: null,
  15                 // This option defaults to true on iOS devices.
  16                 preventFocusZoom: /iPhone|iPad|iPod/.test( navigator.platform ) && navigator.userAgent.indexOf( "AppleWebKit" ) > -1,
  17                 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])",
  18                 clearSearchButtonText: "clear text",
  19                 disabled: false
  20         },
  21
  22         _create: function() {
  23
  24                 var self = this,
  25                         input = this.element,
  26                         o = this.options,
  27                         theme = o.theme || $.mobile.getInheritedTheme( this.element, "c" ),
  28                         themeclass  = " ui-body-" + theme,
  29                         mini = input.jqmData( "mini" ) === true,
  30                         miniclass = mini ? " ui-mini" : "",
  31                         focusedEl, clearbtn;
  32
  33                 function toggleClear() {
  34                         setTimeout( function() {
  35                                 clearbtn.toggleClass( "ui-input-clear-hidden", !input.val() );
  36                         }, 0 );
  37                 }
  38
  39                 $( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" );
  40
  41                 focusedEl = input.addClass("ui-input-text ui-body-"+ theme );
  42
  43                 // XXX: Temporary workaround for issue 785 (Apple bug 8910589).
  44                 //      Turn off autocorrect and autocomplete on non-iOS 5 devices
  45                 //      since the popup they use can't be dismissed by the user. Note
  46                 //      that we test for the presence of the feature by looking for
  47                 //      the autocorrect property on the input element. We currently
  48                 //      have no test for iOS 5 or newer so we're temporarily using
  49                 //      the touchOverflow support flag for jQM 1.0. Yes, I feel dirty. - jblas
  50                 if ( typeof input[0].autocorrect !== "undefined" && !$.support.touchOverflow ) {
  51                         // Set the attribute instead of the property just in case there
  52                         // is code that attempts to make modifications via HTML.
  53                         input[0].setAttribute( "autocorrect", "off" );
  54                         input[0].setAttribute( "autocomplete", "off" );
  55                 }
  56
  57
  58                 //"search" input widget
  59                 if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
  60
  61                         focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield" + themeclass + miniclass + "'></div>" ).parent();
  62                         clearbtn = $( "<a href='#' class='ui-input-clear' title='" + o.clearSearchButtonText + "'>" + o.clearSearchButtonText + "</a>" )
  63                                 .bind('click', function( event ) {
  64                                         input
  65                                                 .val( "" )
  66                                                 .focus()
  67                                                 .trigger( "change" );
  68                                         clearbtn.addClass( "ui-input-clear-hidden" );
  69                                         event.preventDefault();
  70                                 })
  71                                 .appendTo( focusedEl )
  72                                 .buttonMarkup({
  73                                         icon: "delete",
  74                                         iconpos: "notext",
  75                                         corners: true,
  76                                         shadow: true,
  77                                         mini: mini
  78                                 });
  79
  80                         toggleClear();
  81
  82                         input.bind( 'paste cut keyup focus change blur', toggleClear );
  83
  84                 } else {
  85                         input.addClass( "ui-corner-all ui-shadow-inset" + themeclass + miniclass );
  86                 }
  87
  88                 input.focus(function() {
  89                                 focusedEl.addClass( $.mobile.focusClass );
  90                         })
  91                         .blur(function() {
  92                                 focusedEl.removeClass( $.mobile.focusClass );
  93                         })
  94                         // In many situations, iOS will zoom into the select upon tap, this prevents that from happening
  95                         .bind( "focus", function() {
  96                                 if ( o.preventFocusZoom ) {
  97                                         $.mobile.zoom.disable( true );
  98                                 }
  99                         })
 100                         .bind( "blur", function() {
 101                                 if ( o.preventFocusZoom ) {
 102                                         $.mobile.zoom.enable( true );
 103                                 }
 104                         });
 105
 106                 // Autogrow
 107                 if ( input.is( "textarea" ) ) {
 108                         var extraLineHeight = 15,
 109                                 keyupTimeoutBuffer = 100,
 110                                 keyupTimeout;
 111
 112                         this._keyup = function() {
 113                                 var scrollHeight = input[ 0 ].scrollHeight,
 114                                         clientHeight = input[ 0 ].clientHeight;
 115
 116                                 if ( clientHeight < scrollHeight ) {
 117                                         input.height(scrollHeight + extraLineHeight);
 118                                 }
 119                         };
 120
 121                         input.keyup(function() {
 122                                 clearTimeout( keyupTimeout );
 123                                 keyupTimeout = setTimeout( self._keyup, keyupTimeoutBuffer );
 124                         });
 125
 126                         // binding to pagechange here ensures that for pages loaded via
 127                         // ajax the height is recalculated without user input
 128                         this._on( $(document), {"pagechange": "_keyup" });
 129
 130                         // Issue 509: the browser is not providing scrollHeight properly until the styles load
 131                         if ( $.trim( input.val() ) ) {
 132                                 // bind to the window load to make sure the height is calculated based on BOTH
 133                                 // the DOM and CSS
 134                                 this._on( $(window), {"load": "_keyup"});
 135                         }
 136                 }
 137                 if ( input.attr( "disabled" ) ) {
 138                         this.disable();
 139                 }
 140         },
 141
 142         disable: function() {
 143                 var $el;
 144                 if ( this.element.attr( "disabled", true ).is( "[type='search'], :jqmData(type='search')" ) ) {
 145                         $el = this.element.parent();
 146                 } else {
 147                         $el = this.element;
 148                 }
 149                 $el.addClass( "ui-disabled" );
 150                 return this._setOption( "disabled", true );
 151         },
 152
 153         enable: function() {
 154                 var $el;
 155
 156                 // TODO using more than one line of code is acceptable ;)
 157                 if ( this.element.attr( "disabled", false ).is( "[type='search'], :jqmData(type='search')" ) ) {
 158                         $el = this.element.parent();
 159                 } else {
 160                         $el = this.element;
 161                 }
 162                 $el.removeClass( "ui-disabled" );
 163                 return this._setOption( "disabled", false );
 164         }
 165 });
 166
 167 //auto self-init widgets
 168 $( document ).bind( "pagecreate create", function( e ) {
 169         $.mobile.textinput.prototype.enhanceWithin( e.target, true );
 170 });
 171
 172 })( jQuery );
 173 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
 174 });
 175 //>>excludeEnd("jqmBuildExclude");