sproutcore 1.9.2 → 1.10.0.rc.1

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

@@ -90,20 +90,12 @@ sc_require('mixins/inline_editor');
 SC.InlineTextFieldView = SC.TextFieldView.extend(SC.InlineEditor,
 /** @scope SC.InlineTextFieldView.prototype */ {
   classNames: ['inline-editor'],
+
   /**
     Over-write magic number from SC.TextFieldView
   */
   _topOffsetForFirefoxCursorFix: 0,
 
-  /**
-    Tells RootResponder to blur us when there is a mousedown anywhere else.
-
-    @type Boolean
-    @default YES
-  */
-  // TODO: remove this when focus behavior is improved
-  blurOnMouseDown: YES,
-
   /*
   * @private
   * @method
@@ -222,62 +214,43 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.InlineEditor,
   /*
   * @method
   *
-  * Positions the editor over the passed view.
+  * Positions the editor over the target view.
   *
   * If you want to tweak the positioning of the editor, you may pass a custom
   * frame for it to position itself on.
   *
-  * Additionally, if your view is a member of a collectionView, the isCollection
-  * flag should be set to YES.
-  *
   * @param {SC.View} the view to be positioned over
   * @param {Hash} optional custom frame
   * @param {Boolean} if the view is a member of a collection
   */
-	positionOverTargetView: function(target, isCollection, pane, frame, elem) {
-    var isIE7;
-
-    if(!pane) pane = target.get('pane');
-
-    if(!elem) elem = target.$()[0];
-
-    // if we weren't given a frame, build one from the target
-    if(!frame) {
-      var tempFrame = target.get('frame');
-
-      frame = SC.offset(elem);
-
-      frame.height = tempFrame.height;
-      frame.width = tempFrame.width;
+	positionOverTargetView: function(target, exampleFrame, elem, _oldExampleFrame, _oldElem) {
+    var targetLayout = target.get('layout'),
+        layout = {};
+
+    // Deprecates isCollection and pane arguments by fixing them up if they appear.
+    if (!SC.none(_oldExampleFrame)) {
+      exampleFrame = _oldExampleFrame;
+      elem = _oldElem;
+
+      // @if(debug)
+      SC.warn("Developer Warning: the isCollection and pane arguments have been deprecated and can be removed.  The inline text field will now position itself within the same parent element as the target, thus removing the necessity to calculate the position of the target relative to the pane.");
+      // @endif
     }
 
-    var layout={},
-		paneElem = pane.$()[0],
-		tarLayout = target.get('layout');
+    // In case where the label is part of an SC.ListItemView
+    if (exampleFrame && elem) {
+      var frame = SC.offset(elem, 'parent');
 
-    layout.height = frame.height;
-    layout.width = frame.width;
-
-    isIE7 = SC.browser.isIE &&
-        SC.browser.compare(SC.browser.engineVersion, '7') === 0;
-    if (isCollection && tarLayout.left) {
-      layout.left=frame.x-tarLayout.left-paneElem.offsetLeft-1;
-      if(isIE7) layout.left--;
-    } else {
-      layout.left=frame.x-paneElem.offsetLeft-1;
-      if(isIE7) layout.left--;
-    }
-
-    if (isCollection && tarLayout.top) {
-      layout.top=frame.y-tarLayout.top-paneElem.offsetTop;
-      if(isIE7) layout.top=layout.top-2;
+      layout.top = targetLayout.top + frame.y - exampleFrame.height/2;
+      layout.left = targetLayout.left + frame.x;
+      layout.height = exampleFrame.height;
+      layout.width = exampleFrame.width;
     } else {
-      layout.top=frame.y-paneElem.offsetTop;
-      if(isIE7) layout.top=layout.top-2;
+      layout = SC.copy(targetLayout);
     }
 
     this.set('layout', layout);
-	},
+  },
 
   /*
   * Flag indicating whether the editor is allowed to use multiple lines.
@@ -307,13 +280,16 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.InlineEditor,
   beginEditing: function(original, label) {
 		if(!original(label)) return NO;
 
-    var pane = label.get('pane'), elem = this.get('exampleElement');
+    var pane = label.get('pane'),
+      elem = this.get('exampleElement');
 
     this.beginPropertyChanges();
 
+    if (label.multiline) this.set('multiline', label.multiline);
+
     // if we have an exampleElement we need to make sure it's an actual
     // DOM element not a jquery object
-    if(elem) {
+    if (elem) {
       if(elem.length) elem = elem[0];
     }
 
@@ -324,7 +300,7 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.InlineEditor,
 
     this.updateStyle(elem);
 
-    this.positionOverTargetView(label, this.get('isCollection'), pane, this.get('exampleFrame'), elem);
+    this.positionOverTargetView(label, this.get('exampleFrame'), elem);
 
     this._previousFirstResponder = pane ? pane.get('firstResponder') : null;
     this.becomeFirstResponder();
@@ -380,18 +356,6 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.InlineEditor,
     this.mouseDown(e);
   },
 
-  /** @private */
-  keyDown: function(evt) {
-    var ret = this.interpretKeyEvents(evt) ;
-    this.fieldValueDidChange(true);
-    return !ret ? NO : ret ;
-  },
-
-  /** @private */
-  insertText: null,
-
-  //keyUp: function() { return true; },
-
   _scitf_blurInput: function() {
     var el = this.$input()[0];
     if (el) el.blur();
@@ -436,7 +400,7 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.InlineEditor,
   },
 
   // Invoked when the user presses return.  If this is a multi-line field,
-  // then allow the new line to proceed by calling the super class. 
+  // then allow the new line to proceed by calling the super class.
   // Otherwise, try to commit the edit.
   /** @private */
   insertNewline: function(evt) {
@@ -474,159 +438,3 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.InlineEditor,
     return YES ;
   }
 });
-
-/*
-* These class methods allow you to manage an editor without implementing
-* SC.Editable. They exist for backwards compatibility and should no longer be
-* used.
-*/
-SC.mixin(SC.InlineTextFieldView, {
-  inlineEditorDelegate: SC.InlineTextFieldDelegate,
-
-  label: null,
-  editor: null,
-
-  /*
-  * @method
-  *
-  * This method creates a singleton editor editing your view. Delegate methods
-  * will be called on your view as normal.
-  *
-  * To trigger compatibility mode, call this method with a hash of options. The
-  * required options are:
-  *
-        SC.InlineTextFieldView.beginEditing({
-          delegate: myView,
-          frame: myView.get('frame'),
-          exampleElement: myView.$()
-        }) ;
-  *
-     - `delegate` -- The view that should be notified of events on the editor.
-     - `frame` -- The frame of the view that you want the editor to position itself over.
-     - `exampleElement` -- A DOM element to use when copying styles.
-
-  * Other options may be passed to further customize the editor:
-  *
-     - `multiline` -- If YES then the hitting return will add to the value instead of exiting the inline editor.
-     - `commitOnBlur` -- If YES then blurring will commit the value, otherwise it will discard the current value.  Defaults to YES.
-     - `validator` -- Validator to be attached to the field.
-
-    The editor expects your source view to implement the InlineTextFieldViewDelegate protocol.
-
-    @params {Object} a hash of options or the view to edit
-    @returns {Boolean} whether editing began successfully
-  */
-  beginEditing: function(label) {
-    var del, editor, options, value, labelProxy;
-
-    // for backwards compatibility, we allow you to pass an options hash with options that will be set on the editor
-    if(SC.typeOf(label) === SC.T_HASH) {
-      options = label;
-
-      if(!options.delegate || !options.exampleElement || !options.frame) {
-        SC.error("Delegate, exampleElement, and frame options are required.");
-        return NO;
-      }
-
-      label = options.delegate;
-      value = options.value;
-    }
-
-    else {
-      value = label.get('value');
-    }
-
-    labelProxy = SC.beget(label);
-
-    // these functions may have side effects, so they need to have their
-    // this reference assigned to the original object before proxying
-    labelProxy.mixin({
-      inlineEditorWillBeginEditing: function() {
-        if(label.inlineEditorWillBeginEditing) label.inlineEditorWillBeginEditing.apply(label, arguments);
-      },
-
-      inlineEditorDidBeginEditing: function() {
-        if(label.inlineEditorDidBeginEditing) label.inlineEditorDidBeginEditing.apply(label, arguments);
-      },
-
-      inlineEditorWillCommitEditing: function(editor, value, editable) {
-        if(label.inlineEditorWillCommitEditing) label.inlineEditorWillCommitEditing(editor, value, editable);
-        if(label.inlineEditorWillEndEditing) label.inlineEditorWillEndEditing(editor, value);
-      },
-
-      inlineEditorDidCommitEditing: function(editor, value, editable) {
-        if(label.inlineEditorDidCommitEditing) label.inlineEditorDidCommitEditing(editor, value, editable);
-        if(label.inlineEditorDidEndEditing) label.inlineEditorDidEndEditing(editor, value);
-
-        SC.InlineTextFieldView._endEditing();
-      },
-
-      inlineEditorWillDiscardEditing: function(editor, editable) {
-        if(label.inlineEditorWillDiscardEditing) label.inlineEditorWillDiscardEditing(editor, editable);
-        if(label.inlineEditorWillEndEditing) label.inlineEditorWillEndEditing(editor, this.get('value'));
-      },
-
-      inlineEditorDidDiscardEditing: function(editor, editable) {
-        if(label.inlineEditorDidDiscardEditing) label.inlineEditorDidDiscardEditing(editor, editable);
-        if(label.inlineEditorDidEndEditing) label.inlineEditorDidEndEditing(editor, this.get('value'));
-
-        SC.InlineTextFieldView._endEditing();
-      }
-    });
-
-    if(label.inlineEditorShouldBeginEditing && !label.inlineEditorShouldBeginEditing(label, value)) return NO;
-
-    this.editor = editor = this.inlineEditorDelegate.acquireEditor(label);
-
-    editor.set('value', value);
-
-    if(options) {
-      editor.set('exampleElement', options.exampleElement);
-      editor.set('exampleFrame', options.frame);
-      editor.set('multiline', options.multiline);
-      editor.set('escapeHTML', options.escapeHTML);
-      editor.set('isCollection', options.isCollection);
-      editor.set('commitOnBLur', options.commitOnBlur);
-      editor.set('validator', options.validator);
-    }
-
-    if(editor) return editor.beginEditing(labelProxy);
-    else return NO;
-  },
-
-  /*
-  * @method
-  *
-  * Ends editing on the current editor and saves the value back to the
-  * view being edited.
-  *
-  * @returns {Boolean} whether the editor was allowed to commit successfully
-  */
-  commitEditing: function() {
-    return this.inlineEditorDelegate.editor ? this.inlineEditorDelegate.editor.commitEditing() : NO;
-  },
-
-  /*
-  * @method
-  *
-  * Ends editing on the current editor without saving the value.
-  *
-  * @returns {Boolean} whether the editor was allowed to discard successfully
-  */
-  discardEditing: function() {
-    return this.inlineEditorDelegate.editor ? this.inlineEditorDelegate.editor.discardEditing() : NO;
-  },
-
-  /*
-  * @private
-  * @method
-  *
-  * Cleans up the current editor and editing context.
-  */
-  _endEditing: function() {
-    this.inlineEditorDelegate.releaseEditor(this.editor);
-
-    this.editor = null;
-  }
-});
-

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

@@ -9,8 +9,7 @@ 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
 
@@ -30,7 +29,7 @@ SC.LabelView = SC.View.extend(SC.Control, SC.InlineEditable,
 
   classNames: ['sc-label-view'],
 
-  displayProperties: ['displayTitle', 'displayHint', 'escapeHTML', 'textAlign', 'fontWeight', 'icon', 'needsEllipsis', 'toolTip'],
+  displayProperties: ['displayTitle', 'displayHint', 'displayToolTip', 'icon'],
 
   /**
     The delegate that gets notified of events related to the editing process. Set
@@ -55,22 +54,19 @@ SC.LabelView = SC.View.extend(SC.Control, SC.InlineEditable,
   exampleEditor: SC.InlineTextFieldView,
 
   /**
-    Specify the font weight for this.  You may pass SC.REGULAR_WEIGHT, or SC.BOLD_WEIGHT.
+    Whether the value, hint and toolTip will be escaped to avoid HTML injection
+    attacks or not.
 
-    @property {String} SC.REGULAR_WEIGHT|SC.BOLD_WEIGHT
-    @default null
-    @deprecated Use CSS instead.
-  */
-  fontWeight: null,
+    You should only disable this option if you are sure you are displaying
+    non-user generated text.
 
-  /**
-    If true, value will be escaped to avoid scripting attacks.
+    Note: this is not an observed display property.  If you change it after
+    rendering, you should call `displayDidChange` on the view to update the layer.
 
-    This is a default value that can be overridden by the
-    settings on the owner view.
+    @type Boolean
+    @default true
   */
-  escapeHTML: YES,
-  escapeHTMLBindingDefault: SC.Binding.oneWay().bool(),
+  escapeHTML: true,
 
   /**
     If true, then the value will be localized.
@@ -79,6 +75,21 @@ SC.LabelView = SC.View.extend(SC.Control, SC.InlineEditable,
   localize: NO,
   localizeBindingDefault: SC.Binding.oneWay().bool(),
 
+  /**
+    If set to true, the label element will include the 'ellipsis' class, which
+    by default sets the 'white-space' style to 'nowrap' and the 'text-overflow'
+    style to 'ellipsis'.
+
+    Note: that this does NOT work with multi-line text.
+
+    Note: this is not an observed display property.  If you change it after
+    rendering, you should call `displayDidChange` on the view to update the layer.
+
+    @type Boolean
+    @default false
+   */
+  needsEllipsis: false,
+
   /**
     Set this to a validator or to a function and the value
     will be passed through it before being set.
@@ -120,7 +131,10 @@ SC.LabelView = SC.View.extend(SC.Control, SC.InlineEditable,
   /**
     Set the alignment of the label view.
 
-    @property {String} SC.ALIGN_LEFT|SC.ALIGN_CENTER|SC.ALIGN_RIGHT
+    Note: this is not an observed display property.  If you change it after
+    rendering, you should call `displayDidChange` on the view to update the layer.
+
+    @type String SC.ALIGN_LEFT|SC.ALIGN_CENTER|SC.ALIGN_RIGHT
     @default null
     @deprecated Use CSS instead.
   */
@@ -141,7 +155,7 @@ SC.LabelView = SC.View.extend(SC.Control, SC.InlineEditable,
   /**
     The name of the theme's SC.LabelView render delegate.
 
-    @property {String}
+    @type String
   */
   renderDelegateName: 'labelRenderDelegate',
 
@@ -217,14 +231,14 @@ SC.LabelView = SC.View.extend(SC.Control, SC.InlineEditable,
     return hintVal;
   }.property('hint').cacheable(),
 
-  /**
-    Event dispatcher callback.
-    If isEditable is set to true, opens the inline text editor view.
-
-    @param {DOMMouseEvent} evt DOM event
+  /** @private */
+  mouseDown: function(evt) {
+    // Capture the event if it's a double click and we are editable.
+    return this.get('isEditable') && evt.clickCount === 2;
+  },
 
-  */
-  doubleClick: function( evt ) { return this.beginEditing(); },
+  /** @private If isEditable is set to true, opens the inline text editor view. */
+  doubleClick: function (evt) { return this.beginEditing(); },
 
   /*
   * @method

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

@@ -10,6 +10,11 @@ sc_require('system/text_selection') ;
 sc_require('mixins/static_layout') ;
 sc_require('mixins/editable');
 
+SC.AUTOCAPITALIZE_NONE = 'none';
+SC.AUTOCAPITALIZE_SENTENCES = 'sentences';
+SC.AUTOCAPITALIZE_WORDS = 'words';
+SC.AUTOCAPITALIZE_CHARACTERS = 'characters';
+
 /**
   @class
 
@@ -20,7 +25,7 @@ sc_require('mixins/editable');
   @extends SC.Editable
   @author Charles Jolley
  */
-SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
+SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   /** @scope SC.TextFieldView.prototype */ {
 
   classNames: ['sc-text-field-view'],
@@ -125,15 +130,26 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   autoCorrect: YES,
 
   /**
-    Whether the browser should automatically capitalize the input.
+    Specifies the autocapitalization behavior.
+
+    Possible values are:
+
+     - `SC.AUTOCAPITALIZE_NONE` -- Do not autocapitalize.
+     - `SC.AUTOCAPITALIZE_SENTENCES` -- Autocapitalize the first letter of each
+       sentence.
+     - `SC.AUTOCAPITALIZE_WORDS` -- Autocapitalize the first letter of each word.
+     - `SC.AUTOCAPITALIZE_CHARACTERS` -- Autocapitalize all characters.
+
+    Boolean values are also supported, with YES interpreted as
+    `SC.AUTOCAPITALIZE_NONE` and NO as `SC.AUTOCAPITALIZE_SENTENCES`.
 
     When `autoCapitalize` is set to `null`, the browser will use
     the system defaults.
 
-    @type Boolean
-    @default YES
+    @type String SC.AUTOCAPITALIZE_NONE|SC.AUTOCAPITALIZE_SENTENCES|SC.AUTOCAPITALIZE_WORDS|SC.AUTOCAPITALIZE_CHARACTERS
+    @default SC.CAPITALIZE_SENTENCES
    */
-  autoCapitalize: YES,
+  autoCapitalize: SC.CAPITALIZE_SENTENCES,
 
   /**
     Localizes the hint if necessary.
@@ -352,7 +368,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     This property indicates if the value in the text field can be changed.
     If set to `NO`, a `readOnly` attribute will be added to the DOM Element.
 
-    Note if `isEnabled` is `NO` this property will have no effect.
+    Note if `isEnabledInPane` is `NO` this property will have no effect.
 
     @type Boolean
     @default YES
@@ -441,7 +457,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       // The client is setting the value.  Make sure the new value is a text
       // selection object.
       if (!value  ||  !value.kindOf  ||  !value.kindOf(SC.TextSelection)) {
-        throw "When setting the selection, you must specify an SC.TextSelection instance.";
+        throw new Error("When setting the selection, you must specify an SC.TextSelection instance.");
       }
 
       if (element) {
@@ -471,7 +487,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   // INTERNAL SUPPORT
   //
 
-  displayProperties: ['isBrowserFocusable','formattedHint', 'fieldValue', 'isEditing', 'isEditable', 'leftAccessoryView', 'rightAccessoryView', 'isTextArea'],
+  // Note: isEnabled is required here because it is used in the render function.
+  displayProperties: ['isBrowserFocusable','formattedHint', 'fieldValue', 'isEditing', 'isEditable', 'isEnabled', 'leftAccessoryView', 'rightAccessoryView', 'isTextArea'],
 
   createChildViews: function () {
     sc_super();
@@ -479,8 +496,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   },
 
   acceptsFirstResponder: function () {
-    return this.get('isEnabled');
-  }.property('isEnabled'),
+    return this.get('isEnabledInPane');
+  }.property('isEnabledInPane'),
 
   accessoryViewObserver: function () {
     var classNames,
@@ -489,7 +506,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
         accessoryView;
 
     for (i=0; i<len; i++) {
-      viewProperty = viewProperties[i] ;
+      viewProperty = viewProperties[i];
 
       // Is there an accessory view specified?
       previousView = this['_'+viewProperty] ;
@@ -508,19 +525,28 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
           classNames = previousView.get('classNames') ;
           classNames = classNames.without('sc-text-field-accessory-view') ;
           previousView.set('classNames', classNames) ;
-          this.removeChild(previousView) ;
-          previousView = null ;
-          this['_'+viewProperty] = null ;
+
+          if (previousView.createdByParent) {
+            this.removeChildAndDestroy(previousView);
+          } else {
+            this.removeChild(previousView);
+          }
+
+          // Tidy up.
+          previousView = this['_'+viewProperty] = this['_created' + viewProperty] = null;
         }
 
         // If there's a new accessory view to add, do so now.
         if (accessoryView) {
           // If the user passed in a class rather than an instance, create an
           // instance now.
-          if (accessoryView.isClass) {
-            accessoryView = accessoryView.create({
-              layoutView: this
-            }) ;
+          accessoryView = this.createChildView(accessoryView);
+
+          // Fix up right accessory views to be right positioned.
+          if (viewProperty === 'rightAccessoryView') {
+            var layout = accessoryView.get('layout');
+
+            accessoryView.adjust({ left: null, right: layout.right || 0 });
           }
 
           // Add in the "sc-text-field-accessory-view" class name so that the
@@ -541,29 +567,6 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   }.observes('leftAccessoryView', 'rightAccessoryView'),
 
-  layoutChildViewsIfNeeded: function (isVisible) {
-    // For the right accessory view, adjust the positioning such that the view
-    // is right-justified, unless 'right' is specified.
-    if (!isVisible) isVisible = this.get('isVisibleInWindow') ;
-    if (isVisible && this.get('childViewsNeedLayout')) {
-      var rightAccessoryView = this.get('rightAccessoryView') ;
-      if (rightAccessoryView  &&  rightAccessoryView.get) {
-        var layout = rightAccessoryView.get('layout') ;
-        if (layout) {
-          // Clear out any 'left' value.
-          layout.left = null;
-
-          // Unless the user specified a 'right' value, specify a default to
-          // right-justify the view.
-          if (!layout.right) layout.right = 0 ;
-
-          rightAccessoryView.adjust(layout) ;
-        }
-      }
-    }
-    sc_super() ;
-  },
-
   render: function (context, firstTime) {
     sc_super() ;
     var v, accessoryViewWidths, leftAdjustment, rightAdjustment;
@@ -639,18 +642,23 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
       spellCheckString = this.get('spellCheckEnabled') ? ' spellcheck="true"' : ' spellcheck="false"';
 
-      if (autoCorrect != null) {
-        autocorrectString = ' autocorrect=' + (!autoCorrect ? '"off"' : '"true"');
+      if (!SC.none(autoCorrect)) {
+        autocorrectString = ' autocorrect=' + (!autoCorrect ? '"off"' : '"on"');
       }
 
-      if (autoCorrect != null) {
-        autocapitalizeString = ' autocapitalize=' + (!autoCapitalize ? '"off"' : '"true"');
+      if (!SC.none(autoCapitalize)) {
+        if (SC.typeOf(autoCapitalize) === 'boolean') {
+          autocapitalizeString = ' autocapitalize=' + (!autoCapitalize ? '"none"' : '"sentences"');
+        } else {
+          autocapitalizeString = ' autocapitalize=' + autoCapitalize;
+        }
       }
 
-      if (isBrowserFocusable) {
+      if (!isBrowserFocusable) {
         browserFocusable = 'tabindex="-1"';
       }
-        // if hint is on and we don't want it to show on focus, create one
+
+      // if hint is on and we don't want it to show on focus, create one
       if (SC.platform.input.placeholder && !hintOnFocus) {
         hintString = ' placeholder="' + hint + '"';
       }
@@ -743,16 +751,20 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
         }
       }
 
-      if (autoCorrect != null) {
-        input.attr('autoCorrect', !autoCorrect ? 'off' : 'true');
+      if (!SC.none(autoCorrect)) {
+        input.attr('autocorrect', !autoCorrect ? 'off' : 'on');
       } else {
-        input.attr('autoCorrect', null);
+        input.attr('autocorrect', null);
       }
 
-      if (autoCapitalize != null) {
-        input.attr('autoCapitalize', !autoCapitalize ? 'off' : 'true');
+      if (!SC.none(autoCapitalize)) {
+        if (SC.typeOf(autoCapitalize) == 'boolean') {
+          input.attr('autocapitalize', !autoCapitalize ? 'none' : 'sentences');
+        } else {
+          input.attr('autocapitalize', autoCapitalize);
+        }
       } else {
-        input.attr('autoCapitalize', null);
+        input.attr('autocapitalize', null);
       }
 
       if (!hintOnFocus && SC.platform.input.placeholder) input.attr('placeholder', hint);
@@ -1190,33 +1202,33 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
     return NO;
   },
-  
+
   /** @private */
-  deleteForward: function(evt) { 
+  deleteForward: function(evt) {
     evt.allowDefault();
     return YES;
   },
 
   /** @private */
-  deleteBackward: function(evt) { 
+  deleteBackward: function(evt) {
     evt.allowDefault();
     return YES;
   },
 
   /** @private */
-  moveLeft: function(evt) { 
+  moveLeft: function(evt) {
     evt.allowDefault();
     return YES;
   },
 
   /** @private */
-  moveRight: function(evt) { 
+  moveRight: function(evt) {
     evt.allowDefault();
     return YES;
   },
 
   /** @private */
-  selectAll: function(evt) { 
+  selectAll: function(evt) {
     evt.allowDefault();
     return YES;
   },
@@ -1238,7 +1250,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
     return NO;
   },
-  
+
   keyUp: function (evt) {
     if (SC.browser.isMozilla &&
         evt.keyCode === SC.Event.KEY_RETURN) { this.fieldValueDidChange(); }
@@ -1256,7 +1268,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     var fieldValue = this.get('fieldValue'); // use 'fieldValue' since we want actual text
     this._txtFieldMouseDown=YES;
     this.becomeFirstResponder();
-    if (!this.get('isEnabled')) {
+    if (!this.get('isEnabledInPane')) {
       evt.stop();
       return YES;
     } else {
@@ -1271,7 +1283,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     // processing.
     this.notifyPropertyChange('selection');
 
-    if (!this.get('isEnabled')) {
+    if (!this.get('isEnabledInPane')) {
       evt.stop();
       return YES;
     }