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