Class: SC.TextFieldView


Extends SC.Editable, SC.FieldView.

A text field is an input element with type "text". This view adds support for hinted values, etc.

Defined in: text_field.js

Field Summary

Fields borrowed from SC.View:
acceptsMultitouch, ariaHidden, ariaRole, attributeBindings, autoMixins, backgroundColor, childViewLayout, childViewLayoutOptions, childViews, childViewsNeedLayout, classNameBindings, classNames, concatenatedProperties, createdByParent, designMode, displayProperties, enabledState, firstKeyView, hasLayout, hasTouch, hasVisibility, isBuildingIn, isBuildingOut, isChildViewLayoutLive, isEnabled, isFixedHeight, isFixedPosition, isFixedSize, isFixedWidth, isKeyResponder, isTextSelectable, isView, isVisible, lastKeyView, layerLocationNeedsUpdate, layerNeedsUpdate, layout, modeAdjust, nextKeyView, page, pane, parentView, previousKeyView, renderDelegateName, shouldInheritCursor, shouldInheritEnabled, tagName, themeName, toolTip, touchBoundary, transitionAdjust, transitionAdjustOptions, transitionHide, transitionHideOptions, transitionIn, transitionInOptions, transitionOut, transitionOutOptions, transitionShow, transitionShowOptions, useStaticLayout
Fields borrowed from SC.Responder:
hasFirstResponder, isFirstResponder, responderContext
Fields borrowed from SC.Object:
isDestroyed, isObject, nextProperty, object, property, target, toInvalidate
Fields borrowed from SC.Observable:
isObservable
Fields borrowed from SC.Control:
controlSize, errorLabel, fieldKey, fieldLabel, isActive, isControl, isSelected

Instance Methods

Field Detail

allowsErrorAsValue Boolean

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.

Default value:
true
applyImmediately Boolean

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.

Default value:
true
autoCapitalize String SC.AUTOCAPITALIZE_NONE|SC.AUTOCAPITALIZE_SENTENCES|SC.AUTOCAPITALIZE_WORDS|SC.AUTOCAPITALIZE_CHARACTERS

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 true interpreted as SC.AUTOCAPITALIZE_NONE and false as SC.AUTOCAPITALIZE_SENTENCES.

When autoCapitalize is set to null, the browser will use the system defaults.

Default value:
SC.CAPITALIZE_SENTENCES
autoComplete Boolean

Whether the browser should automatically complete the input.

When autoComplete is set to null, the browser will use the system defaults.

Default value:
null
autoCorrect Boolean

Whether the browser should automatically correct the input.

When autoCorrect is set to null, the browser will use the system defaults.

Default value:
true
autoResizePadding Number
How much padding should be used when automatically resizing.
Default value:
20
See:
SC.AutoResize#autoResizePadding
commitOnBlur Boolean

Flag indicating whether the editor should automatically commit if you click outside it.

Default value:
true
defaultTabbingEnabled Boolean

If you set this property to false the tab key won't trigger its default behavior (tabbing to the next field).

Default value:
true
focused Boolean
Whether the text field is currently focused.
Default value:
false
formattedHint String
Localizes and escapes the hint if necessary.
hint String
The hint to display while the field is not active.
Default value:
""
hintOnFocus Boolean

Whether to show the hint while the field still has focus.

While newer versions of Safari, Firefox and Chrome will act this way using the placeholder attribute, other browsers will not. By setting this property to true, we can ensure that the hint will always appear even when the field has focus.

Note: If hintOnFocus is false, this doesn't necessarily mean that the hint will disappear on focus, because some browsers will still not remove the placeholder on focus when empty. Important:* You can not modify this property once the view has been rendered.

Default value:
true
isBrowserFocusable Boolean

This property will set a tabindex="-1" on your view if set to false.

This gives us control over the native tabbing behavior. When nextValidKeyView reaches the end of the views in the pane views tree, it won't go to a textfield that can accept the default tabbing behavior in any other pane. This was a problem when you had an alert on top of a mainPane with textfields.

Modal panes set this to false on all textfields that don't belong to itself.

Default value:
true
isContextMenuEnabled Boolean
Enabled context menu for textfields.
Default value:
true
isEditable Boolean

This property indicates if the value in the text field can be changed. If set to false, a readOnly attribute will be added to the DOM Element.

Note if isEnabledInPane is false this property will have no effect.

Default value:
true
isEditing Boolean
If `true` then the text field is currently editing.
Default value:
false
isTextArea Boolean

If true 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.

Default value:
false
isTextField Boolean
Walk like a duck.
Default value:
true
leftAccessoryView SC.View

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 to be inside the field but the text editing will not overlap the accessory view.

The view will be rooted to the top-left of the text field. You should use a layout with 'left' and/or 'top' specified if you would like to adjust the offset from the top-left.

One example use would be for a web site's icon, found to the left of the URL field, in many popular web browsers.

Note: If you set a left accessory view, the left padding of the text field (really, the left offset of the padding element) will automatically be set to the width of the accessory view, overriding any CSS you may have 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.

Default value:
null
localize Boolean
Whether the hint should be localized or not.
Default value:
true
maxLength Number
Maximum amount of characters this field will allow.
Default value:
5096
rightAccessoryView SC.View

An optional view instance, or view class reference, which will be visible on the right side of the text field. Visually the accessory view will look to be inside the field but the text editing will not overlap the accessory view.

The view will be rooted to the top-right of the text field. You should use a layout with 'right' and/or 'top' specified if you would like to adjust the offset from the top-right. If 'left' is specified in the layout it will be cleared.

One example use would be for a button to clear the contents of the text field.

Note: If you set a right accessory view, the right padding of the text field (really, the right offset of the padding element) will automatically be set to the width of the accessory view, overriding any CSS you may have 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.

Default value:
null
selection SC.TextSelection

The current selection of the text field, returned as an SC.TextSelection object.

Note that if the selection changes a new object will be returned -- it is not the case that a previously-returned SC.TextSelection object will simply have its properties mutated.

shouldRenderBorder Boolean
Whether to render a border or not.
Default value:
true
spellCheckEnabled Boolean

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.

Default value:
true
supportsAutoResize Boolean
Text fields support auto resizing.
Default value:
true
See:
SC.AutoResize#supportsAutoResize
type String
The type attribute of the input.
Default value:
"text"
Read Only
useHintOverlay Boolean

Whether or not the text field view will use an overlaid label for the hint.

There are two conditions that will result in the text field adding an overlaid label for the hint. The first is when the hintOnFocus property is true. This allows the user to focus the text field and still see the hint text while there is no value in the field. Since some browsers clear the placeholder when the field has text, this is a way to ensure the same behavior across all browsers.

The second is when the browser doesn't support the placeholder attribute (i.e. < IE 10). By using an overlaid label rather than inserting the hint into the input, we are able to show clear text hints over password fields.

Default value:
true

Instance Method Detail

acceptsFirstResponder()
accessoryViewObserver()
autoResizeLayer()
The layer to automatically resize.
See:
SC.AutoResize#autoResizeLayer
autoResizeText()
The text to be used when automatically resizing the text field.
See:
SC.AutoResize#autoResizeText
createChildViews()
didAppendToDocument()

SC.View view state callback.

Once the view is appended, fix up the text layout to hint and input.

didCreateLayer()
Override of SC.FieldView.prototype.didCreateLayer.
fieldDidBlur(evt)
Parameters:
evt
fieldDidFocus(evt)
Parameters:
evt
keyUp(evt)
Parameters:
evt
mouseDown(evt)
Parameters:
evt
mouseUp(evt)
Parameters:
evt
mouseWheel(evt)
Adds mouse wheel support for textareas.
Parameters:
evt
render(context, firstTime)
Parameters:
context
firstTime
selectStart(evt)

Allows text selection in IE. We block the IE only event selectStart to block text selection in all other views.

Parameters:
evt
touchEnd(evt)
Parameters:
evt
touchStart(evt)
Parameters:
evt
willDestroyLayer()
Removes all the events attached to the textfield
Documentation generated by JsDoc Toolkit 2.4.0 on Wed Apr 08 2015 10:02:21 GMT-0600 (CST)