mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
84729a4fec
Just for good measure. All HTML5 inputs are now auto enhanced into the styled versions. We may need to decide if any of these need to be degraded if the controls are wonky in some browsers.
140 lines
4.4 KiB
JavaScript
140 lines
4.4 KiB
JavaScript
/*
|
|
* jQuery Mobile Framework : "textinput" plugin for text inputs, textareas
|
|
* Copyright (c) jQuery Project
|
|
* Dual licensed under the MIT or GPL Version 2 licenses.
|
|
* http://jquery.org/license
|
|
*/
|
|
|
|
(function( $, undefined ) {
|
|
|
|
$.widget( "mobile.textinput", $.mobile.widget, {
|
|
options: {
|
|
theme: null,
|
|
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])"
|
|
},
|
|
|
|
_create: function() {
|
|
|
|
var input = this.element,
|
|
o = this.options,
|
|
theme = o.theme,
|
|
themedParent, themeclass, themeLetter, focusedEl, clearbtn;
|
|
|
|
if ( !theme ) {
|
|
themedParent = this.element.closest( "[class*='ui-bar-'],[class*='ui-body-']" );
|
|
themeLetter = themedParent.length && /ui-(bar|body)-([a-z])/.exec( themedParent.attr( "class" ) );
|
|
theme = themeLetter && themeLetter[2] || "c";
|
|
}
|
|
|
|
themeclass = " ui-body-" + theme;
|
|
|
|
$( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" );
|
|
|
|
input.addClass("ui-input-text ui-body-"+ o.theme );
|
|
|
|
focusedEl = input;
|
|
|
|
// XXX: Temporary workaround for issue 785 (Apple bug 8910589).
|
|
// Turn off autocorrect and autocomplete on non-iOS 5 devices
|
|
// since the popup they use can't be dismissed by the user. Note
|
|
// that we test for the presence of the feature by looking for
|
|
// the autocorrect property on the input element. We currently
|
|
// have no test for iOS 5 or newer so we're temporarily using
|
|
// the touchOverflow support flag for jQM 1.0. Yes, I feel dirty. - jblas
|
|
if ( typeof input[0].autocorrect !== "undefined" && !$.support.touchOverflow ) {
|
|
// Set the attribute instead of the property just in case there
|
|
// is code that attempts to make modifications via HTML.
|
|
input[0].setAttribute( "autocorrect", "off" );
|
|
input[0].setAttribute( "autocomplete", "off" );
|
|
}
|
|
|
|
|
|
//"search" input widget
|
|
if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
|
|
|
|
focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield" + themeclass + "'></div>" ).parent();
|
|
clearbtn = $( "<a href='#' class='ui-input-clear' title='clear text'>clear text</a>" )
|
|
.tap(function( event ) {
|
|
input.val( "" ).focus();
|
|
input.trigger( "change" );
|
|
clearbtn.addClass( "ui-input-clear-hidden" );
|
|
event.preventDefault();
|
|
})
|
|
.appendTo( focusedEl )
|
|
.buttonMarkup({
|
|
icon: "delete",
|
|
iconpos: "notext",
|
|
corners: true,
|
|
shadow: true
|
|
});
|
|
|
|
function toggleClear() {
|
|
if ( !input.val() ) {
|
|
clearbtn.addClass( "ui-input-clear-hidden" );
|
|
} else {
|
|
clearbtn.removeClass( "ui-input-clear-hidden" );
|
|
}
|
|
}
|
|
|
|
toggleClear();
|
|
|
|
input.keyup( toggleClear )
|
|
.focus( toggleClear );
|
|
|
|
} else {
|
|
input.addClass( "ui-corner-all ui-shadow-inset" + themeclass );
|
|
}
|
|
|
|
input.focus(function() {
|
|
focusedEl.addClass( "ui-focus" );
|
|
})
|
|
.blur(function(){
|
|
focusedEl.removeClass( "ui-focus" );
|
|
});
|
|
|
|
// Autogrow
|
|
if ( input.is( "textarea" ) ) {
|
|
var extraLineHeight = 15,
|
|
keyupTimeoutBuffer = 100,
|
|
keyup = function() {
|
|
var scrollHeight = input[ 0 ].scrollHeight,
|
|
clientHeight = input[ 0 ].clientHeight;
|
|
|
|
if ( clientHeight < scrollHeight ) {
|
|
input.css({
|
|
height: (scrollHeight + extraLineHeight)
|
|
});
|
|
}
|
|
},
|
|
keyupTimeout;
|
|
|
|
input.keyup(function() {
|
|
clearTimeout( keyupTimeout );
|
|
keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
|
|
});
|
|
|
|
// Issue 509: the browser is not giving scrollHeight properly until after the document
|
|
// is ready.
|
|
if ($.trim(input.text())) {
|
|
$(keyup);
|
|
}
|
|
}
|
|
},
|
|
|
|
disable: function(){
|
|
( this.element.attr( "disabled", true ).is( "[type='search'],:jqmData(type='search')" ) ?
|
|
this.element.parent() : this.element ).addClass( "ui-disabled" );
|
|
},
|
|
|
|
enable: function(){
|
|
( this.element.attr( "disabled", false).is( "[type='search'],:jqmData(type='search')" ) ?
|
|
this.element.parent() : this.element ).removeClass( "ui-disabled" );
|
|
}
|
|
});
|
|
|
|
//auto self-init widgets
|
|
$( document ).bind( "pagecreate create", function( e ){
|
|
$.mobile.textinput.prototype.enhanceWithin( e.target );
|
|
});
|
|
|
|
})( jQuery );
|