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
- allowsErrorAsValue
- applyImmediately
- autoCapitalize
- autoComplete
- autoCorrect
- autoResizePadding
- commitOnBlur
- defaultTabbingEnabled
- focused
- formattedHint
- hint
- hintOnFocus
- isBrowserFocusable
- isContextMenuEnabled
- isEditable
- isEditing
- isTextArea
- isTextField
- leftAccessoryView
- localize
- maxLength
- rightAccessoryView
- selection
- shouldRenderBorder
- spellCheckEnabled
- supportsAutoResize
- type
- useHintOverlay
- 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
- acceptsFirstResponder()
- accessoryViewObserver()
- autoResizeLayer()
- autoResizeText()
- createChildViews()
- didAppendToDocument()
- didCreateLayer()
- fieldDidBlur(evt)
- fieldDidFocus(evt)
- keyUp(evt)
- mouseDown(evt)
- mouseUp(evt)
- mouseWheel(evt)
- render(context, firstTime)
- selectStart(evt)
- touchEnd(evt)
- touchStart(evt)
- willDestroyLayer()
Field Detail
allowsErrorAsValue BooleanIf 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
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
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
Whether the browser should automatically complete the input.
When autoComplete
is set to null
, the browser will use
the system defaults.
- Default value:
- null
Whether the browser should automatically correct the input.
When autoCorrect
is set to null
, the browser will use
the system defaults.
- Default value:
- true
- Default value:
- 20
- See:
- SC.AutoResize#autoResizePadding
Flag indicating whether the editor should automatically commit if you click outside it.
- Default value:
- true
If you set this property to false the tab key won't trigger its default behavior (tabbing to the next field).
- Default value:
- true
- Default value:
- false
- Default value:
- ""
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
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
- Default value:
- true
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
- Default value:
- false
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
- Default value:
- true
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
- Default value:
- true
- Default value:
- 5096
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
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.
- Default value:
- true
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
- Default value:
- true
- See:
- SC.AutoResize#supportsAutoResize
- Default value:
- "text"
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
- See:
- SC.AutoResize#autoResizeLayer
- See:
- SC.AutoResize#autoResizeText
SC.View
view state callback.
Once the view is appended, fix up the text layout to hint and input.
- Parameters:
- evt
- Parameters:
- evt
- Parameters:
- evt
- Parameters:
- evt
- Parameters:
- evt
- Parameters:
- evt
- Parameters:
- context
- firstTime
Allows text selection in IE. We block the IE only event selectStart
to
block text selection in all other views.
- Parameters:
- evt
- Parameters:
- evt
- Parameters:
- evt