2 * "textinput" plugin for text inputs, textareas
5 (function( $, undefined ) {
7 $.widget( "mobile.textinput", $.mobile.widget, {
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])"
15 var input = this.element,
17 theme = o.theme || $.mobile.getInheritedTheme( this.element, "c" ),
18 themeclass = " ui-body-" + theme,
21 $( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" );
23 focusedEl = input.addClass("ui-input-text ui-body-"+ theme );
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" );
40 //"search" input widget
41 if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
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();
51 .appendTo( focusedEl )
59 function toggleClear() {
60 setTimeout(function() {
61 clearbtn.toggleClass( "ui-input-clear-hidden", !input.val() );
67 input.bind('paste cut keyup focus change blur', toggleClear);
70 input.addClass( "ui-corner-all ui-shadow-inset" + themeclass );
73 input.focus(function() {
74 focusedEl.addClass( "ui-focus" );
77 focusedEl.removeClass( "ui-focus" );
81 if ( input.is( "textarea" ) ) {
82 var extraLineHeight = 15,
83 keyupTimeoutBuffer = 100,
85 var scrollHeight = input[ 0 ].scrollHeight,
86 clientHeight = input[ 0 ].clientHeight;
88 if ( clientHeight < scrollHeight ) {
89 input.height(scrollHeight + extraLineHeight);
94 input.keyup(function() {
95 clearTimeout( keyupTimeout );
96 keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
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
103 $( window ).load( keyup );
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 );
113 ( this.element.attr( "disabled", true ).is( "[type='search'],:jqmData(type='search')" ) ?
114 this.element.parent() : this.element ).addClass( "ui-disabled" );
118 ( this.element.attr( "disabled", false).is( "[type='search'],:jqmData(type='search')" ) ?
119 this.element.parent() : this.element ).removeClass( "ui-disabled" );
123 //auto self-init widgets
124 $( document ).bind( "pagecreate create", function( e ){
125 $.mobile.textinput.prototype.enhanceWithin( e.target );