1 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
2 //>>description: Enhances and consistently styles text inputs.
3 //>>label: Text Inputs & Textareas
5 //>>css: ../css/themes/default/jquery.mobile.theme.css, ../css/structure/jquery.mobile.forms.textinput.css
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 ) {
11 $.widget( "mobile.textinput", $.mobile.widget, {
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"
22 var input = this.element,
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" : "",
30 $( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" );
32 focusedEl = input.addClass("ui-input-text ui-body-"+ theme );
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" );
49 //"search" input widget
50 if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
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 ) {
59 clearbtn.addClass( "ui-input-clear-hidden" );
60 event.preventDefault();
62 .appendTo( focusedEl )
71 function toggleClear() {
72 setTimeout(function() {
73 clearbtn.toggleClass( "ui-input-clear-hidden", !input.val() );
79 input.bind('paste cut keyup focus change blur', toggleClear);
82 input.addClass( "ui-corner-all ui-shadow-inset" + themeclass + miniclass );
85 input.focus(function() {
86 focusedEl.addClass( $.mobile.focusClass );
89 focusedEl.removeClass( $.mobile.focusClass );
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 );
97 .bind( "blur", function() {
98 if( o.preventFocusZoom ){
99 $.mobile.zoom.enable( true );
104 if ( input.is( "textarea" ) ) {
105 var extraLineHeight = 15,
106 keyupTimeoutBuffer = 100,
108 var scrollHeight = input[ 0 ].scrollHeight,
109 clientHeight = input[ 0 ].clientHeight;
111 if ( clientHeight < scrollHeight ) {
112 input.height(scrollHeight + extraLineHeight);
117 input.keyup(function() {
118 clearTimeout( keyupTimeout );
119 keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
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 );
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
130 $( window ).load( keyup );
136 ( this.element.attr( "disabled", true ).is( "[type='search'],:jqmData(type='search')" ) ?
137 this.element.parent() : this.element ).addClass( "ui-disabled" );
141 ( this.element.attr( "disabled", false).is( "[type='search'],:jqmData(type='search')" ) ?
142 this.element.parent() : this.element ).removeClass( "ui-disabled" );
146 //auto self-init widgets
147 $( document ).bind( "pagecreate create", function( e ){
148 $.mobile.textinput.prototype.enhanceWithin( e.target, true );
152 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
154 //>>excludeEnd("jqmBuildExclude");