MD.TextInput = new Class({ Implements: [Options,Events] ,options: { type: 'text' // [string] 'text', 'search', 'filter', 'password', 'textarea' ,placeholderText: '' ,presetValue: '' ,className: '' ,inputProperties: {} ,maxLength: 500 ,returnHTML: false ,keyupEventMinimum: 0 ,advancedMenuTrigger: false // ,onFocus: function(e, thisObj){} // ,onBlur: function(e, thisObj){} // ,onEmpty: function(thisObj){} // ,onPopulated: function(thisObj){} // ,onKeyup: function(key, inputValue, thisObj){} // ,onKeydown: function(key, inputValue, thisObj){} // ,onAdvancedMenuToggle: function(thisObj) {} } ,initialize: function(options){ this.setOptions(options); this.placeholderTextIsVisible = true; this.build(); if (this.options.returnHTML) return this.html; } ,build: function() { // This has to be set up first, and then merged with the "properties" object of the this.input element ... because IE8 doesn't like the "type" property to be changed AFTER it has been created. var typeObject = {}; if (this.options.type != 'textarea') { switch (this.options.type){ case 'text': case 'password': typeObject.type = this.options.type break; case 'search': case 'filter': typeObject.type = 'text' break; } } this.html = new Element('div', {'class':'MDTextInput ' + this.options.type.capitalize() + ' ' + this.options.className}).grab( this.innerWrap = new Element('div.MDTextInput-InnerWrap').grab( this.inner = new Element('div.MDTextInput-Inner').adopt( this.placeholderText = new Element('div.MDTextInput-Placeholder', { html: this.options.placeholderText ,tween: {duration: 100} }) ,this.input = new Element((this.options.type == 'textarea' ? 'textarea' : 'input')+'.MDTextInput-Input', Object.merge(this.options.inputProperties, { value: (this.options.presetValue != '' ? this.options.presetValue : '') ,maxlength: (this.options.maxLength == -1 ? '' : this.options.maxLength) ,tween: {duration: 100} ,events: { keydown: function(e){ this.fireEvent('keydown', [e.key, this.input.get('value'), this]); }.bind(this) ,keyup: function(e){ if (this.$events.keyup) { if (this.input.value.length >= this.options.keyupEventMinimum) { this.fireEvent('keyup', [e.key, this.input.get('value'), this]); } } if (this.getValue() == '') { this.clear(); } else { this.value = this.getValue(); if (this.placeholderTextIsVisible) { this.placeholderText.fade('out'); this.placeholderTextIsVisible = false; } this.fireEvent('populated', this, 20); } }.bind(this) ,focus: function(e) { this.value = this.getValue(); this.fireEvent('focus', [e, this]); this.focused = true; }.bind(this) ,blur: function(e) { this.value = this.getValue(); this.fireEvent('blur', [e, this]); this.focused = false; }.bind(this) } }, typeObject)) ) ) ); if (this.options.presetValue) { this.placeholderText.hide(); if (this.options.type == 'textarea') this.input.set('html', this.options.presetValue); } if (this.options.advancedMenuTrigger && this.options.type != 'textarea') { this.advancedMenuTrigger = new MD.Button({ text: '+' ,className: 'MDTextInput-AdvancedMenuTrigger' ,onClick: function() { this.fireEvent('advancedToggle', this); }.bind(this) }); this.inner.grab(this.advancedMenuTrigger.toElement()); } } ,setValue: function(string){ if (typeOf(string) == 'string') { this.input.set('value', string); this.value = string; this.placeholderText.set('html', string); this.options.placeholderText = string; } else { console.error('Cannot set the value of this MDTextInput to anything that is not a string.'); } return this; } ,getValue: function(){ return this.input.get('value'); } ,setPlaceholderText: function(string){ if (typeOf(string) == 'string') { this.placeholderText.set('html', string); this.options.placeholderText = string; } else { console.error('Cannot set the placeholder text of this MDTextInput to anything that is not a string.'); } return this; } ,isFocused: function(){ return this.focused; } ,focus: function(){ if (!Browser.ie8) this.input.focus(); return this; } ,blur: function(){ this.input.blur(); return this; } ,deactivate: function() { this.input.setProperty('readonly', 'readonly'); this.html.addClass('Deactivated'); return this; } ,clear: function(){ if (!this.placeholderTextIsVisible) { this.placeholderText.fade('in'); this.placeholderTextIsVisible = true; } this.input.set('value', ''); this.fireEvent('empty', this, 20); return this; } ,toElement: function(){ return this.html; } });