sproutcore 1.4.5-java → 1.5.0-java

data/lib/frameworks/sproutcore/frameworks/foundation/views/label.js

@@ -1,20 +1,16 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-sc_require('views/view') ;
-sc_require('mixins/control') ;
-
-SC.ALIGN_LEFT = 'left';
-SC.ALIGN_RIGHT = 'right';
-SC.ALIGN_CENTER = 'center';
+sc_require('mixins/inline_editable');
+sc_require('mixins/inline_editor_delegate');
+sc_require('delegates/inline_text_field');
 
 SC.REGULAR_WEIGHT = 'normal';
 SC.BOLD_WEIGHT = 'bold';
-
 /**
   @class
   
@@ -25,18 +21,47 @@ SC.BOLD_WEIGHT = 'bold';
   
   @extends SC.View
   @extends SC.Control
+  @extends SC.InlineEditable
   @extends SC.InlineEditorDelegate
   @since SproutCore 1.0
 */
-SC.LabelView = SC.View.extend(SC.Control,
+SC.LabelView = SC.View.extend(SC.Control, SC.InlineEditable,
 /** @scope SC.LabelView.prototype */ {
 
   classNames: ['sc-label-view'],
 
+  displayProperties: ['displayTitle', 'textAlign', 'fontWeight', 'icon', 'escapeHTML', 'needsEllipsis', 'hint'],
+
+  /**
+    The delegate that gets notified of events related to the editing process. Set
+    this to the object you want to handles the lifecycle of the inline editor.
+
+    Defaults to itself.
+    @type SC.Object
+  */
+  inlineEditorDelegate: SC.InlineTextFieldDelegate,
+
+  isEditable: NO,
+  
+  /**
+    The exampleInlineTextFieldView property is by default a 
+    SC.InlineTextFieldView but it can be set to a customized inline text field
+    view.
+  
+    @property
+    @type {SC.View}
+    @default {SC.InlineTextFieldView}
+  */
+  exampleEditor: SC.InlineTextFieldView,
+  
   /**
     Specify the font weight for this.  You may pass SC.REGULAR_WEIGHT, or SC.BOLD_WEIGHT.
+    
+    @property {String} SC.REGULAR_WEIGHT|SC.BOLD_WEIGHT
+    @default null
+    @deprecated
   */
-  fontWeight: SC.REGULAR_WEIGHT,
+  fontWeight: null,
   
   /**
     If true, value will be escaped to avoid scripting attacks.
@@ -44,16 +69,14 @@ SC.LabelView = SC.View.extend(SC.Control,
     This is a default value that can be overridden by the
     settings on the owner view.
   */
-  escapeHTML: true,
+  escapeHTML: YES,
   escapeHTMLBindingDefault: SC.Binding.oneWay().bool(),
 
   /**
     If true, then the value will be localized.
-    
-    This is a default default that can be overidden by the
-    settings in the owner view.
+    This is a default that can be overidden by the settings in the owner view.
   */
-  localize: false,
+  localize: NO,
   localizeBindingDefault: SC.Binding.oneWay().bool(),
   
   /**
@@ -80,17 +103,6 @@ SC.LabelView = SC.View.extend(SC.Control,
   */
   hint: null,
 
-  /**
-    The exampleInlineTextFieldView property is by default a 
-    SC.InlineTextFieldView but it can be set to a customized inline text field
-    view.
-  
-    @property
-    @type {SC.View}
-    @default {SC.InlineTextFieldView}
-  */
-  exampleInlineTextFieldView: SC.InlineTextFieldView,
-  
   /**
     An optional icon to display to the left of the label.  Set this value
     to either a CSS class name (for spriting) or an image URL.
@@ -99,14 +111,32 @@ SC.LabelView = SC.View.extend(SC.Control,
   
   /**
     Set the alignment of the label view.
+    
+    @property {String} SC.ALIGN_LEFT|SC.ALIGN_MIDDLE|SC.ALIGN_RIGHT
+    @default null
+    @deprecated
   */
-  textAlign: SC.ALIGN_LEFT,
-  
+  textAlign: null,
+
+  //
+  // SUPPORT FOR AUTOMATIC RESIZING
+  //
+  supportsAutoResize: YES,
+  autoResizeLayer: function() { return this.get('layer'); }
+  .property('layer').cacheable(),
+
+  autoResizeText: function() { return this.get('displayTitle'); }
+  .property('displayTitle').cacheable(),
+
+  autoResizePadding: SC.propertyFromRenderDelegate('autoResizePadding', 10),
+
   /**
-    If you want the inline editor to be multiline set this property to YES.
+    The name of the theme's SC.LabelView render delegate.
+
+    @property {String}
   */
-  isInlineEditorMultiline: NO,
-  
+  renderDelegateName: 'labelRenderDelegate',
+
   /**
     [RO] The value that will actually be displayed.
     
@@ -115,7 +145,7 @@ SC.LabelView = SC.View.extend(SC.Control,
     
     @field
   */
-  displayValue: function() {
+  displayTitle: function() {
     var value, formatter;
     
     value = this.get('value') ;
@@ -144,13 +174,10 @@ SC.LabelView = SC.View.extend(SC.Control,
     if (!SC.none(value) && value.toString) value = value.toString() ;
     
     // 4. Localize
-    if (value && this.getDelegateProperty('localize', this.displayDelegate)) value = value.loc() ;
-
-    // 5. escapeHTML if needed
-    if (this.get('escapeHTML')) value = SC.RenderContext.escapeHTML(value);
-    
+    if (value && this.getDelegateProperty('localize', this.displayDelegate)) value = SC.String.loc(value) ;
+        
     return value ;
-  }.property('value', 'localize', 'formatter', 'escapeHTML').cacheable(),
+  }.property('value', 'localize', 'formatter').cacheable(),
   
   
   /**
@@ -162,31 +189,9 @@ SC.LabelView = SC.View.extend(SC.Control,
   */
   hintValue: function() {
     var hintVal = this.get('hint');
-    if (this.get('escapeHTML')) hintVal = SC.RenderContext.escapeHTML(hintVal);
     return hintVal ;
-  }.property('hint', 'escapeHTML').cacheable(),
+  }.property('hint').cacheable(),
   
-  /**
-    Enables editing using the inline editor.
-  */
-  isEditable: NO,
-  isEditableBindingDefault: SC.Binding.bool(),
-
-  /**
-    YES if currently editing label view.
-  */
-  isEditing: NO,
-  
-  /**
-    Validator to use during inline editing.
-    
-    If you have set isEditing to YES, then any validator you set on this
-    property will be used when the label view is put into edit mode.
-    
-    @type {SC.Validator}
-  */
-  validator: null,
-
   /**
     Event dispatcher callback.
     If isEditable is set to true, opens the inline text editor view.
@@ -195,145 +200,26 @@ SC.LabelView = SC.View.extend(SC.Control,
     
   */
   doubleClick: function( evt ) { return this.beginEditing(); },
-  
-  
-  /**
-    Opens the inline text editor (closing it if it was already open for 
-    another view).
-    
-    @return {Boolean} YES if did begin editing
-  */
-  beginEditing: function() {
-    if (this.get('isEditing')) return YES ;
-    if (!this.get('isEditable')) return NO ;
 
-    var el = this.$(),
-        value = this.get('value'),
-        f = SC.viewportOffset(el[0]),
-        frameTemp = this.convertFrameFromView(this.get('frame'), null) ;
-    f.width=frameTemp.width;
-    f.height=frameTemp.height;
-    
-    SC.InlineTextFieldView.beginEditing({
-      frame: f,
-      delegate: this,
-      exampleElement: el,
-      value: value, 
-      multiline: this.get('isInlineEditorMultiline'), 
-      isCollection: NO,
-      validator: this.get('validator'),
-      exampleInlineTextFieldView: this.get('exampleInlineTextFieldView')
-    });
-  },
-  
-  /**
-    Cancels the current inline editor and then exits editor. 
-    
-    @return {Boolean} NO if the editor could not exit.
+  /*
+  * @method
+  *
+  * Hide the label view while the inline editor covers it.
   */
-  discardEditing: function() {
-    if (!this.get('isEditing')) return YES ;
-    return SC.InlineTextFieldView.discardEditing() ;
-  },
-  
-  /**
-    Commits current inline editor and then exits editor.
-    
-    @return {Boolean} NO if the editor could not exit
-  */
-  commitEditing: function() {
-    if (!this.get('isEditing')) return YES ;
-    return SC.InlineTextFieldView.commitEditing() ;
-  },
+  inlineEditorDidBeginEditing: function(original, editor, value, editable) {
+    this._oldOpacity = this.get('layout').opacity || 1;
+    this.adjust('opacity', 0);
 
-  /** @private
-    Set editing to true so edits will no longer be allowed.
-  */
-  inlineEditorWillBeginEditing: function(inlineEditor) {
-    this.set('isEditing', YES);
-  },
+    original(editor, value, editable);
+  }.enhance(),
 
-  /** @private 
-    Hide the label view while the inline editor covers it.
-  */
-  inlineEditorDidBeginEditing: function(inlineEditor) {
-    var layer = this.$();
-    this._oldOpacity = layer.css('opacity') ;
-    layer.css('opacity', 0.0);
-  },
-  
-  /** @private
-    Delegate method defaults to the isEditable property
-  */
-  inlineEditorShouldBeginEditing: function(){
-    return this.get('isEditable');
-  },
-  
-  /** @private
-    Could check with a validator someday...
+  /*
+  * @method
+  *
+  * Restore the label view when the inline editor finishes.
   */
-  inlineEditorShouldEndEditing: function(inlineEditor, finalValue) {
-    return YES ;
-  },
-
-  /** @private
-    Update the field value and make it visible again.
-  */
-  inlineEditorDidEndEditing: function(inlineEditor, finalValue) {
-    this.setIfChanged('value', finalValue) ;
-    this.$().css('opacity', this._oldOpacity);
+  inlineEditorDidEndEditing: function() {
+    this.adjust('opacity', this._oldOpacity);
     this._oldOpacity = null ;
-    this.set('isEditing', NO) ;
-  },
-
-  displayProperties: 'displayValue textAlign fontWeight icon'.w(),
-  
-  _TEMPORARY_CLASS_HASH: {},
-  
-  render: function(context, firstTime) {
-    var value = this.get('displayValue'),
-        icon = this.get('icon'),
-        hint = this.get('hintValue'),
-        classes, stylesHash, text,
-        iconChanged = false, textChanged = false;
-    
-    if (icon) {
-      var url = (icon.indexOf('/')>=0) ? icon : SC.BLANK_IMAGE_URL,
-          className = (url === icon) ? '' : icon ;
-      icon = '<img src="'+url+'" alt="" class="icon '+className+'" />';
-      if(icon!==this._iconCache) {
-        this._iconCache=icon;
-        iconChanged = true;
-      }
-    }
-    
-    if (hint && (!value || value === '')) {
-      text = '<span class="sc-hint">'+hint+'</span>';
-    }else{
-      text = value;
-    }
-    if(text!==this._textCache) {
-      this._textCache=text;
-      textChanged = true;
-    }
-        
-    if(firstTime || textChanged || iconChanged){
-      context.push(icon, text);
-    }
-    
-    // and setup alignment and font-weight on styles
-    stylesHash = { 
-      'text-align': this.get('textAlign'), 
-      'font-weight': this.get('fontWeight')
-    };
-           
-    // if we are editing, set the opacity to 0
-    if (this.get('isEditing')) stylesHash['opacity']=0;
-    context.addStyle(stylesHash);
-    
-    classes = this._TEMPORARY_CLASS_HASH;
-    classes.icon = !!this.get('icon');
-    context.setClass(classes);
   }
-  
 });

data/lib/frameworks/sproutcore/frameworks/foundation/views/text_field.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
@@ -27,14 +27,40 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   classNames: ['sc-text-field-view'],
   isTextField: YES,
 
+  /**
+    The WAI-ARIA role for text field view. This property's value should not be
+    changed.
+
+    @property {String}
+  */
+  ariaRole: 'textbox',
+
   // ..........................................................
   // PROPERTIES
   //
 
+  /**
+    When applyImmediately is turned on, every keystroke will set the value
+    of the underlying object. Turning it off will only set the value on blur.
+    
+    @type String
+    @default YES
+  */
   applyImmediately: YES,
 
+  /*
+  * Flag indicating whether the editor should automatically commit if you click
+  * outside it.
+  *
+  * @type {Boolean}
+  */
+  commitOnBlur: YES,
+
   /**
     If YES, the field will hide its text from display. The default value is NO.
+    
+    @property
+    @type Boolean
   */
   isPassword: NO,
 
@@ -42,32 +68,82 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     If YES then allow multi-line input.  This will also change the default
     tag type from "input" to "textarea".  Otherwise, pressing return will
     trigger the default insertion handler.
+    
+    @property
+    @type Boolean
   */
   isTextArea: NO,
 
   /**
-    The hint to display while the field is not active.  Can be a loc key.
+    The hint to display while the field is not active.
+    
+    @property
+    @type String
   */
   hint: '',
 
+  /*
+  * Localizes the hint if necessary.
+  */
+  formattedHint: function() {
+    var hint = this.get('hint');
+
+    return typeof(hint) === 'string' && this.get('localize') ? SC.String.loc(hint) : hint;
+  }.property('hint', 'localize').cacheable(),
+
+  /*
+  * Whether the hint should be localized or not.
+  */
+  localize: YES,
+
   /**
     If YES then the text field is currently editing.
+    
+    @property
+    @type Boolean
   */
   isEditing: NO,
   
-  hintON:YES,
-  
   /**
     If you set this property to false the tab key won't trigger its default 
     behavior (tabbing to the next field).
+    
+    @property
+    @type Boolean
   */
-  defaultTabbingEnabled:YES,
+  defaultTabbingEnabled: YES,
   
   /**
     Enabled context menu for textfields.
+    
+    @property
+    @type Boolean
   */
   isContextMenuEnabled: YES,
 
+  /**
+    @deprecated
+    
+    If true, every change to the text in the text field updates 'value'.
+    If false, 'value' is only updated when commitEditing() is called (this
+    is called automatically when the text field loses focus), or whenever
+    the return key is pressed while editing the field.
+    
+    @type Boolean
+    @default null
+  */
+  continuouslyUpdatesValue: null,
+
+  /**
+    If no, will not allow transform or validation errors (SC.Error objects)
+    to be passed to 'value'.  Upon focus lost, the text field will revert
+    to its previous value.
+    
+    @property
+    @type Boolean
+  */
+  allowsErrorAsValue: YES,
+
   /**
     An optional view instance, or view class reference, which will be visible
     on the left side of the text field.  Visually the accessory view will look
@@ -87,6 +163,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     defined on the "padding" element.  If you would like to customize the
     amount of left padding used when the accessory view is visible, make the
     accessory view wider, with empty space on the right.
+    
+    @property
+    @type SC.View
   */
   leftAccessoryView: null,
 
@@ -110,28 +189,67 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     defined on the "padding" element.  If you would like to customize the
     amount of right padding used when the accessory view is visible, make the
     accessory view wider, with empty space on the left.
+    
+    @property
+    @type SC.View
   */
   rightAccessoryView: null,
   
-  
   /**
     This property will enable disable HTML5 spell checking if available on the 
-    browser. As of today Safari 4+, Chrome 3+ and Firefox 3+ support it  
-  */
+    browser. As of today Safari 4+, Chrome 3+ and Firefox 3+ support it
     
+    @property
+    @type Boolean
+  */
   spellCheckEnabled: YES,
   
+  /**
+    Maximum amount of characters this field will allow.
+    
+    @property
+    @type Number
+  */
   maxLength: 5096,
   
+  /**
+    Whether to render a border or not.
+    
+    @property
+    @type Boolean
+  */
+  shouldRenderBorder: YES,
+
+  //
+  // SUPPORT FOR AUTOMATIC RESIZING
+  //
+  supportsAutoResize: YES,
+  autoResizeLayer: function() { return this.$input()[0]; }
+  .property('layer').cacheable(),
+
+  autoResizeText: function() { return this.get('value'); }
+  .property('value').cacheable(),
+
+  autoResizePadding: SC.propertyFromRenderDelegate('autoResizePadding', 20),
+
+  /** @private
+    Whether to show hint or not
+  */
+  _hintON: YES,
   
-  _isFocused: NO,
-  
-  
-  init:function(){
-    var hintStatus = this.get('hintON'),
-        val = this.get('value');
-    if(!val || val && val.length===0) this.set('hintON', YES);
-    else this.set('hintON', NO);
+  init: function() {
+    var val = this.get('value');
+    this._hintON = (!val || val && val.length===0) ? YES : NO;
+    
+    var continuouslyUpdatesValue = this.get('continouslyUpdatesValue');
+    if (continuouslyUpdatesValue !== null && continuouslyUpdatesValue !== undefined) {
+      this.set('applyImmediately',  continuouslyUpdatesValue);
+
+      //@ if (debug)
+      SC.Logger.warn("SC.TextFieldView#continuouslyUpdatesValue is deprecated. Please use #applyImmediately instead.");
+      //@ endif
+    }
+    
     return sc_super();
   },
 
@@ -166,11 +284,19 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
         }
         else {
           // In IE8, input elements don't have hasOwnProperty() defined.
-          if ('selectionStart' in element) {
-            start = element.selectionStart ;
+          try {
+            if ('selectionStart' in element) {
+              start = element.selectionStart ;
+            }
+            if ('selectionEnd' in element) {
+              end = element.selectionEnd ;
+            }
           }
-          if ('selectionEnd' in element) {
-            end = element.selectionEnd ;
+          // In Firefox when you ask the selectionStart or End of a hidden 
+          // input, sometimes it throws a weird error.
+          // Adding this to just ignore it.
+          catch (e){
+            return null;
           }
 
           // Support Internet Explorer.
@@ -243,7 +369,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   // INTERNAL SUPPORT
   //
 
-  displayProperties: 'hint fieldValue isEditing leftAccessoryView rightAccessoryView isTextArea'.w(),
+  displayProperties: ['formattedHint', 'fieldValue', 'isEditing', 'leftAccessoryView', 'rightAccessoryView', 'isTextArea'],
 
   createChildViews: function() {
     sc_super();
@@ -348,6 +474,15 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     // update layer classes always
     context.setClass('not-empty', v.length > 0);
 
+    //addressing accessibility
+    if(firstTime) {
+      context.attr('aria-multiline', this.get('isTextArea'));
+      context.attr('aria-disabled', !this.get('isEnabled'));
+    }
+    if(!SC.ok(this.get('value'))) {
+      context.attr('aria-invalid', YES);
+    }
+
     // If we have accessory views, we'll want to update the padding on the
     // hint to compensate for the width of the accessory view.  (It'd be nice
     // if we could add in the original padding, too, but there's no efficient
@@ -364,32 +499,34 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     if(SC.browser.mozilla) this.invokeLast(this._applyFirefoxCursorFix);
   },
 
-  /**
+  /** @private
     If isTextArea is changed (this might happen in inlineeditor constantly)
     force the field render to render like the firsttime to avoid writing extra
     code. This can be useful also 
   */
   _forceRenderFirstTime: NO,
-    
+  
+  /** @private */
   _renderFieldLikeFirstTime: function(){
     this.set('_forceRenderFirstTime', YES);
   }.observes('isTextArea'),
   
+  /** @private */
   _renderField: function(context, firstTime, value, leftAdjustment, rightAdjustment) {
     // TODO:  The cleanest thing might be to create a sub- rendering context
     //        here, but currently SC.RenderContext will render sibling
     //        contexts as parent/child.
 
-    var hint = this.get('hint'), disabled, name, adjustmentStyle, type, 
+    var hint = this.get('formattedHint'), disabled, name, adjustmentStyle, type, 
         hintElements, element, paddingElementStyle, fieldClassNames,
         spellCheckEnabled=this.get('spellCheckEnabled'), spellCheckString,
         maxLength = this.get('maxLength'), isOldSafari;
-        
+
     context.setClass('text-area', this.get('isTextArea'));
     
     //Adding this to differentiate between older and newer versions of safari
     //since the internal default field padding changed 
-    isOldSafari= (parseInt(SC.browser.safari,0)<532);
+    isOldSafari= (parseInt(SC.browser.webkit,0)<532);
     context.setClass('oldWebKitFieldPadding', isOldSafari);
     
     spellCheckString = spellCheckEnabled ? ' spellcheck="true"' : ' spellcheck="false"';
@@ -398,7 +535,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       disabled = this.get('isEnabled') ? '' : 'disabled="disabled"' ;
       name = this.get('layerId');
       
-      context.push('<span class="border"></span>');
+      if(this.get('shouldRenderBorder')) context.push('<span class="border"></span>');
 
       // Render the padding element, with any necessary positioning
       // adjustments to accommodate accessory views.
@@ -411,9 +548,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       }
       context.push('<span class="padding" '+adjustmentStyle+'>');
                   
-      value = this.get('escapeHTML')?SC.RenderContext.escapeHTML(value):value;
-      if(!this.get('_supportsPlaceHolder') && (!value || (value && value.length===0))) {
-        value = this.get('hint');
+      value = this.get('escapeHTML') ? SC.RenderContext.escapeHTML(value) : value;
+      if(!SC.platform.input.placeholder && (!value || (value && value.length===0))) {
+        value = hint;
         context.setClass('sc-hint', YES);
       } 
       
@@ -432,7 +569,12 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
                       value, '</textarea></span>') ;
       }
       else {
-        type = this.get('isPassword') ? 'password' : 'text' ;
+        type = 'text';
+        
+        // Internet Explorer won't let us change the type attribute later
+        // so we force it to password if needed now, or if the value is not the hint
+        if (this.get('isPassword') && (value !== hint || SC.browser.isIE || SC.platform.input.placeholder)) { type = 'password'; }
+        
         context.push('<input class="',fieldClassNames,'" type="', type,
                       '" name="', name, '" ', disabled, ' value="', value,
                       '" placeholder="',hint,'"', spellCheckString, 
@@ -441,24 +583,33 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
     }
     else {
-      var input= this.$input();
-      if(!this.get('_supportsPlaceHolder')){
-        var val = this.get('value');
-        if((!val || (val && val.length===0))){
-          if(this.get('hintON') && !this.get('isFirstResponder')){
-            //console.log('hint on render');
+      var input= this.$input(),
+          elem = input[0],
+          val = this.get('value');
+
+      if (!val || (val && val.length === 0)) {
+        if (this._hintON && !this.get('isFirstResponder')) {
+          // Internet Explorer doesn't allow you to modify the type afterwards
+          // jQuery throws an exception as well, so set attribute directly
+          if (this.get('isPassword') && elem.type === "password" && !SC.browser.isIE) { elem.type = 'text'; }
+
+          if (!SC.platform.input.placeholder) {
             context.setClass('sc-hint', YES);
-            input.val(hint);
-          }else{
-            // console.log('removing hint on render');
+          }
+        } else {
+          // Internet Explorer doesn't allow you to modify the type afterwards
+          // jQuery throws an exception as well, so set attribute directly
+          if (this.get('isPassword') && elem.type === 'text' && !SC.browser.isIE) { elem.type = 'password'; }
+
+          if (!SC.platform.input.placeholder) {
             context.setClass('sc-hint', NO);
             input.val('');
           }
         }
-      }else{
-        input.attr('placeholder', hint);
       }
-      
+
+      if (SC.platform.input.placeholder) input.attr('placeholder', hint);
+
       // Enable/disable the actual input/textarea as appropriate.
       element = input[0];
       if (element) {
@@ -537,11 +688,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     // For some strange reason if we add focus/blur events to textarea
     // inmediately they won't work. However if I add them at the end of the
     // runLoop it works fine.
-    if(!this.get('_supportsPlaceHolder') && this.get('hintON')){
+    if(!SC.platform.input.placeholder && this._hintON){
       var currentValue = this.$input().val();
       if(!currentValue || (currentValue && currentValue.length===0)){
-        // console.log('hint on didcreatelayer');
-        this.$input().val(this.get('hint'));
+        this.$input().val(this.get('formattedHint'));
       }
     }
     if(this.get('isTextArea')) {
@@ -588,41 +738,37 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   },
 
-
   /**
     Removes all the events attached to the textfield
   */
   
   willDestroyLayer: function() {
     sc_super();
-
+    
     var input = this.$input();
     SC.Event.remove(input, 'focus',  this, this._textField_fieldDidFocus);
     SC.Event.remove(input, 'blur',   this, this._textField_fieldDidBlur);
     SC.Event.remove(input, 'select', this, this._textField_selectionDidChange);
-    SC.Event.remove(input, 'focus',  this, this._firefox_dispatch_keypress);
+    SC.Event.remove(input, 'keypress',  this, this._firefox_dispatch_keypress);
   },
   
-  /**
+  /** @private
     This function is called by the event when the textfield gets focus
   */
-
   _textField_fieldDidFocus: function(evt) {
     SC.run(function() {
       this.set('focused',YES);
       this.fieldDidFocus(evt);
       var val = this.get('value');
-      if(!this.get('_supportsPlaceHolder') && ((!val) || (val && val.length===0))){
-        // console.log('turn off hint');
-        this.set('hintON', NO);
+      if(!SC.platform.input.placeholder && ((!val) || (val && val.length===0))) {
+        this._hintON = NO;
       }
     }, this);
   },
-
-  /**
+  
+  /** @private
     This function is called by the event when the textfield blurs
   */
-
   _textField_fieldDidBlur: function(evt) {
     SC.run(function() {
       this.set('focused',NO);
@@ -631,14 +777,15 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       // use it for the delegate to end editing
       this.fieldDidBlur(this._origEvent);
       var val = this.get('value');
-      if(!this.get('_supportsPlaceHolder') && ((!val) || (val && val.length===0))){
-        // console.log('turn on hint');
-        this.set('hintON', YES);
+      if(!SC.platform.input.placeholder && ((!val) || (val && val.length===0))) {
+        this._hintON = YES;
       }
     }, this);
   },
   
   fieldDidFocus: function(evt) {
+    this.becomeFirstResponder();
+
     this.beginEditing(evt);
     
     // We have to hide the intercept pane, as it blocks the events. 
@@ -650,7 +797,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     
     // now, hide the intercept on this pane if it has one
     var pane = this.get('pane');
-    if (pane && pane.get("usingTouchIntercept")) {
+    if (pane && pane.get('hasTouchIntercept')) {
       // hide
       pane.hideTouchIntercept();
       
@@ -660,7 +807,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   },
   
   fieldDidBlur: function(evt) {
-    this.commitEditing(evt);
+    this.resignFirstResponder() ;
+
+    if(this.get('commitOnBlur')) this.commitEditing(evt);
     
     // get the pane we hid intercept pane for (if any)
     var touchPane = this._didHideInterceptForPane;
@@ -678,13 +827,12 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   },
 
-  /**
+  /** @private
     Move magic number out so it can be over-written later in inline editor
   */
   _topOffsetForFirefoxCursorFix: 3,
-
-
-  /**
+  
+  /** @private
     Mozilla had this bug until firefox 3.5 or gecko 1.8 They rewrote input text
     and textareas and now they work better. But we have to keep this for older
     versions.
@@ -735,7 +883,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   },
   
   
-  /**
+  /** @private
     In Firefox, as of 3.6 -- including 3.0 and 3.5 -- for input fields only
     (that is, not textarea elements), if the cursor is at the end of the
     field, the "down" key will not result in a "keypress" event for the
@@ -751,12 +899,13 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     
     if (!selection  ||  ((selection.get('length') === 0  &&  (selection.get('start') === 0)  ||  selection.get('end') === valueLen))) {
       responder = SC.RootResponder.responder;
+      if(evt.keyCode===9) return;
       responder.keypress.call(responder, evt);
       evt.stopPropagation();
     }
   },
   
-  
+  /** @private */
   _textField_selectionDidChange: function() {
     this.notifyPropertyChange('selection');
   },
@@ -767,9 +916,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   // When we become first responder, make sure the field gets focus and
   // the hint value is hidden if needed.
 
-  // when we become first responder, focus the text field if needed and
-  // hide the hint text.
-  /** @private */
+  /** @private
+    When we become first responder, focus the text field if needed and
+    hide the hint text.
+  */
   willBecomeKeyResponderFrom: function(keyView) {
     if(this.get('isVisibleInWindow')) {
       var inp = this.$input()[0];
@@ -783,23 +933,22 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   },
   
-  willLoseKeyResponderTo: function(responder) {
-    //if (this._isFocused) this._isFocused = NO ;
-  },
-
-  // In IE, you can't modify functions on DOM elements so we need to wrap the
-  // call to select() like this.
+  /** @private
+    In IE, you can't modify functions on DOM elements so we need to wrap the
+    call to select() like this.
+  */
   _selectRootElement: function() {
-    // make sure input element still exists, as a redraw could have remove it
-    // already
     var inputElem = this.$input()[0];
+    // Make sure input element still exists, as a redraw could have remove it
+    // already.
     if(inputElem) inputElem.select() ;
     else this._textField_selectionDidChange();
   },
-
-  // when we lose first responder, blur the text field if needed and show
-  // the hint text if needed.
-  /** @private */
+  
+  /** @private 
+    When we lose first responder, blur the text field if needed and show
+    the hint text if needed.
+  */
   didLoseKeyResponderTo: function(keyView) {
     var el = this.$input()[0];
     if (el) el.blur();
@@ -807,8 +956,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     this.invokeLater("scrollToOriginIfNeeded", 100);
   },
   
-  /**
-    @private
+  /** @private
     Scrolls to origin if necessary (if the pane's current firstResponder is not a text field).
   */
   scrollToOriginIfNeeded: function() {
@@ -820,7 +968,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       document.body.scrollTop = document.body.scrollLeft = 0;
     }
   },
-
+  
   parentViewDidResize: function() {
     if (SC.browser.mozilla) {
       this.invokeLast(this._applyFirefoxCursorFix);
@@ -828,54 +976,66 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     sc_super();
   },
 
-  /** @private
+  /**
     Simply allow keyDown & keyUp to pass through to the default web browser
     implementation.
   */
   keyDown: function(evt) {
+    var which = evt.which,
+        keyCode = evt.keyCode,
+        maxLengthReached = false,
+        value, view;
+
     // Handle return and escape.  this way they can be passed on to the
     // responder chain.
     // If the event is triggered by a return while entering IME input,
     // don't got through this path.
-    var which = evt.which, maxLengthReached = false;
-    if ((which === 13 && !evt.isIMEInput) && !this.get('isTextArea')) return NO ;
-    if (which === 27) return NO ;
+    if ((which === SC.Event.KEY_RETURN && !evt.isIMEInput) && !this.get('isTextArea')) { return NO; }
+    if (which === SC.Event.KEY_ESC) { return NO; }
 
     // handle tab key
-    if (which === 9 && this.get('defaultTabbingEnabled')) {
-      var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
+    if ((which === SC.Event.KEY_TAB || keyCode === SC.Event.KEY_TAB) && this.get('defaultTabbingEnabled')) {
+      view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
       if (view) view.becomeFirstResponder();
       else evt.allowDefault();
       return YES ; // handled
     }
+    
     // maxlength for textareas
-    if(!SC.browser.safari && this.get('isTextArea')){
+    if(!SC.platform.input.maxlength && this.get('isTextArea')){
       var val = this.get('value');
-      if(val && evt.which>47 && (val.length >= this.get('maxLength'))) {
+
+      // This code is nasty. It's thanks gecko .keycode table that has charters like & with the same keycode as up arrow key
+      if(val && ((!SC.browser.mozilla && which>47) || 
+        (SC.browser.mozilla && ((which>32 && which<43) || which>47) && !(keyCode>36 && keyCode<41))) &&
+        (val.length >= this.get('maxLength'))) {
         maxLengthReached = true;
       }
     }
+
     // validate keyDown...
     // do not validate on touch, as it prevents return.
     if ((this.performValidateKeyDown(evt) || SC.platform.touch) && !maxLengthReached) {
-      this._isKeyDown = YES ;
+      this._isKeyDown = YES;
       evt.allowDefault();
     } else {
       evt.stop();
     }
-    
+
     if (this.get('applyImmediately')) {
       // We need this invokeLater as we need to get the value of the field
       // once the event has been processed. I tried with invokeLast , but
       // I guess the field doesn't repaint until js execution finishes and 
       // therefore the field value doesn't update if we don't give it a break.
-      this.invokeLater(this.fieldValueDidChange,1); // notify change
+      this.invokeLater(this.fieldValueDidChange, 1);
     }
+
     return YES;
   },
-
+  
   keyUp: function(evt) {
-    if(SC.browser.mozilla && evt.keyCode===13) this.fieldValueDidChange(); 
+    if (SC.browser.mozilla && evt.keyCode === SC.Event.KEY_RETURN) { this.fieldValueDidChange(); }
+
     // The caret/selection could have moved.  In some browsers, though, the
     // element's values won't be updated until after this event is finished
     // processing.
@@ -884,7 +1044,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     evt.allowDefault();
     return YES;
   },
-
+  
   mouseDown: function(evt) {
     var fieldValue = this.get('fieldValue'); // use 'fieldValue' since we want actual text
     this._txtFieldMouseDown=YES;
@@ -910,12 +1070,22 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     return sc_super();
   },
   
+  touchStart: function(evt) {
+    return this.mouseDown(evt);
+  },
+
+  touchEnd: function(evt) {
+    return this.mouseUp(evt);
+  },
+  
   /**
     Adds mouse wheel support for textareas.
   */
   mouseWheel: function(evt) {
-    evt.allowDefault();
-    return YES;
+    if(this.get('isTextArea')) {
+      evt.allowDefault();
+      return YES;
+    } else return NO;
   },
 
   /*
@@ -926,21 +1096,22 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     return YES;
   },
   
-  /**
-    This function is to notify if the browser supports the placeholder attribute
-    or not. Currently is disabled as in webkit there is a bug where the color 
-    of the placeholder doesn't refresh all the time.
+  /** @private
+    This observer makes sure to hide the hint when a value is entered, or
+    show it if it becomes empty.
   */
-  _supportsPlaceHolder: function(){
-    return SC.browser.safari && !this.get('isTextArea');
-  }.property('isTextArea').cacheable(),
-  
-  
-  valueObserver: function(){
-    // console.log('value observer');
-    var val = this.get('value');
-    if (val && val.length>0) this.set('hintON', NO);
-    else this.set('hintON', YES);
+  _valueObserver: function() {
+    var val = this.get('value'), max;
+    if (val && val.length>0) {
+      this._hintON = NO;
+
+      max = this.get('maxLength');
+      if (!SC.platform.input.maxlength && val.length > max) {
+        this.set('value', val.substr(0, max));
+      }
+    } else {
+      this._hintON = YES;
+    }
   }.observes('value')
   
 });