2010-09-10 22:23:13 +00:00
|
|
|
/*
|
2010-11-10 00:55:52 +00:00
|
|
|
* jQuery Mobile Framework : "textinput" plugin for text inputs, textareas
|
2010-09-10 22:23:13 +00:00
|
|
|
* Copyright (c) jQuery Project
|
2010-11-20 03:47:47 +00:00
|
|
|
* Dual licensed under the MIT or GPL Version 2 licenses.
|
|
|
|
|
* http://jquery.org/license
|
2010-09-10 22:23:13 +00:00
|
|
|
*/
|
2010-11-11 15:49:15 +00:00
|
|
|
(function($, undefined ) {
|
2010-11-05 01:32:13 +00:00
|
|
|
$.widget( "mobile.textinput", $.mobile.widget, {
|
|
|
|
|
options: {
|
2010-11-11 04:54:01 +00:00
|
|
|
theme: null
|
2010-11-05 01:32:13 +00:00
|
|
|
},
|
|
|
|
|
_create: function(){
|
|
|
|
|
var input = this.element,
|
2010-11-05 01:59:03 +00:00
|
|
|
o = this.options,
|
|
|
|
|
theme = o.theme,
|
|
|
|
|
themeclass;
|
|
|
|
|
|
|
|
|
|
if ( !theme ) {
|
2011-06-17 23:02:53 +00:00
|
|
|
var 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";
|
2010-11-05 01:59:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
themeclass = " ui-body-" + theme;
|
2010-09-10 22:23:13 +00:00
|
|
|
|
2011-04-26 14:01:43 +00:00
|
|
|
$('label[for="'+input.attr('id')+'"]').addClass('ui-input-text');
|
2010-09-10 22:23:13 +00:00
|
|
|
|
2010-10-12 15:43:32 +00:00
|
|
|
input.addClass('ui-input-text ui-body-'+ o.theme);
|
2010-09-19 22:34:50 +00:00
|
|
|
|
|
|
|
|
var focusedEl = input;
|
2010-10-06 03:54:51 +00:00
|
|
|
|
|
|
|
|
//"search" input widget
|
2011-03-25 21:50:40 +00:00
|
|
|
if( input.is( "[type='search'],:jqmData(type='search')" ) ){
|
2011-02-03 18:38:07 +00:00
|
|
|
focusedEl = input.wrap('<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield'+ themeclass +'"></div>').parent();
|
2010-10-06 03:54:51 +00:00
|
|
|
var clearbtn = $('<a href="#" class="ui-input-clear" title="clear text">clear text</a>')
|
2011-01-28 23:20:56 +00:00
|
|
|
.tap(function( e ){
|
2010-10-06 22:33:55 +00:00
|
|
|
input.val('').focus();
|
|
|
|
|
input.trigger('change');
|
|
|
|
|
clearbtn.addClass('ui-input-clear-hidden');
|
2011-01-28 23:20:56 +00:00
|
|
|
e.preventDefault();
|
2010-10-06 03:54:51 +00:00
|
|
|
})
|
2010-10-27 16:19:01 +00:00
|
|
|
.appendTo(focusedEl)
|
|
|
|
|
.buttonMarkup({icon: 'delete', iconpos: 'notext', corners:true, shadow:true});
|
2010-10-06 03:54:51 +00:00
|
|
|
|
|
|
|
|
function toggleClear(){
|
|
|
|
|
if(input.val() == ''){
|
|
|
|
|
clearbtn.addClass('ui-input-clear-hidden');
|
|
|
|
|
}
|
|
|
|
|
else{
|
|
|
|
|
clearbtn.removeClass('ui-input-clear-hidden');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
toggleClear();
|
2011-05-14 05:44:47 +00:00
|
|
|
input.keyup(toggleClear);
|
|
|
|
|
input.focus(toggleClear);
|
2010-09-19 22:34:50 +00:00
|
|
|
}
|
|
|
|
|
else{
|
2010-11-05 01:59:03 +00:00
|
|
|
input.addClass('ui-corner-all ui-shadow-inset' + themeclass);
|
2010-09-19 22:34:50 +00:00
|
|
|
}
|
|
|
|
|
|
2010-09-10 22:23:13 +00:00
|
|
|
input
|
|
|
|
|
.focus(function(){
|
2010-09-19 22:34:50 +00:00
|
|
|
focusedEl.addClass('ui-focus');
|
2010-09-10 22:23:13 +00:00
|
|
|
})
|
|
|
|
|
.blur(function(){
|
2010-09-19 22:34:50 +00:00
|
|
|
focusedEl.removeClass('ui-focus');
|
|
|
|
|
});
|
2010-09-10 22:23:13 +00:00
|
|
|
|
2010-10-18 19:51:49 +00:00
|
|
|
//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 );
|
|
|
|
|
});
|
|
|
|
|
}
|
2010-11-05 01:32:13 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
disable: function(){
|
2011-03-25 21:50:40 +00:00
|
|
|
( this.element.attr("disabled",true).is( "[type='search'],:jqmData(type='search')" ) ? this.element.parent() : this.element ).addClass("ui-disabled");
|
2010-11-05 01:32:13 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
enable: function(){
|
2011-03-25 21:50:40 +00:00
|
|
|
( this.element.attr("disabled", false).is( "[type='search'],:jqmData(type='search')" ) ? this.element.parent() : this.element ).removeClass("ui-disabled");
|
2010-11-05 01:32:13 +00:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
})( jQuery );
|