tizen-web-ui-fw/latest/js/src/widgets/forms/textinput.js

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