Class M.TextFieldView
Extends
M.View.
M.TextFieldView is the prototype of any text field input view. It can be rendered as both
a single line text field and a multiple line text field. If it is styled as a multiple
line text field, is has a built-in autogrow mechanism so the textfield is getting larger
depending on the number of lines of text a user enters.
Defined in: text_field.js.
Constructor Attributes | Constructor Name and Description |
---|---|
Field Attributes | Field Name and Description |
---|---|
Defines whether the text field has multiple lines respectively is a text area.
|
|
The initial text shown inside the text field describing the input or making a suggestion for input
e.g.
|
|
This property specifies the input type of this input field.
|
|
Determines whether to display the textfield grouped with the label specified with the label property.
|
|
The label proeprty defines a text that is shown above or next to the textfield as a 'title'
for the textfield.
|
|
The name of the text field.
|
|
This property can be used to specify the allowed number if chars for this text field
view.
|
|
This property specifies the recommended events for this type of view.
|
|
The type of this object.
|
|
This property can be used to specify whether to use the native implementation
of one of the HTML5 input types if it is available.
|
- Fields borrowed from class M.View:
- childViews, computedValue, contentBinding, contentBindingReverse, cssClass, cssClassOnError, cssClassOnInit, cssStyle, events, hasFocus, html, id, isInline, isView, modelId, parentView, triggerActionOnChange, triggerActionOnEnter, triggerActionOnKeyUp, value
Method Attributes | Method Name and Description |
---|---|
This method clears the text field's value, both in the DOM and within the JS object.
|
|
The contentDidChange method is automatically called by the observable when the
observable's state did change.
|
|
disable()
This method disables the text field by setting the disabled property of its
html representation to true.
|
|
enable()
This method enables the text field by setting the disabled property of its
html representation to false.
|
|
getValue()
This method returns the text field view's value.
|
|
gotFocus(id, event, nextEvent)
This method is called whenever the view gets the focus.
|
|
handleTap(id, event, nextEvent)
This method is called whenever the view is taped/clicked.
|
|
lostFocus(id, event, nextEvent)
This method is called whenever the view lost the focus.
|
|
This method is responsible for registering events for view elements and its child views.
|
|
setValue(value, delegateUpdate, preventValueComputing)
This method sets the text field's value, initiates its re-rendering
and call the delegateValueUpdate().
|
|
setValueFromDOM(id, event, nextEvent)
This method sets its value to the value it has in its DOM representation
and then delegates these changes to a controller property if the
contentBindingReverse property is set.
|
- Methods borrowed from class M.View:
- addCssClass, attachToObservable, clearHtml, clearValues, computeValue, delegateValueUpdate, design, getChildViewsAsArray, getIds, getValues, nl2br, removeCssClass, removeCssProperty, renderUpdate, secure, setCssProperty, style, tab2space, theme, themeChildViews
- Methods borrowed from class M.Object:
- bindToCaller, create, destroy, extend, get, include, set
Field Detail
{Boolean}
hasMultipleLines
Defines whether the text field has multiple lines respectively is a text area.
{String}
initialText
The initial text shown inside the text field describing the input or making a suggestion for input
e.g. "Please enter your Name."
{String}
inputType
This property specifies the input type of this input field. Possible values are:
- M.INPUT_TEXT --> text input (default)
- M.INPUT_PASSWORD --> password
- M.INPUT_NUMBER --> number
- M.INPUT_TELEPHONE --> tel
- M.INPUT_URL --> url
- M.INPUT_EMAIL --> email
Note, that these types are not yet supported by all browsers!
{Boolean}
isGrouped
Determines whether to display the textfield grouped with the label specified with the label property.
If set to YES, the textfield and its label are wrapped in a container and styled as a unit 'out of
the box'. If set to NO, custom styling could be necessary.
If there is no label specified, this property is ignored by default.
{String}
label
The label proeprty defines a text that is shown above or next to the textfield as a 'title'
for the textfield. e.g. "Name:". If no label is specified, no label will be displayed.
{String}
name
The name of the text field. During the rendering, this property gets assigned to the name
property of the text field's html representation. This can be used to manually access the
text field's DOM representation later on.
{Number}
numberOfChars
This property can be used to specify the allowed number if chars for this text field
view. If nothing is specified, the corresponding 'maxlength' HTML property will not
be set.
{Array}
recommendedEvents
This property specifies the recommended events for this type of view.
{String}
type
The type of this object.
{Boolean}
useNativeImplementationIfAvailable
This property can be used to specify whether to use the native implementation
of one of the HTML5 input types if it is available. If set to YES, e.g. iOS5
will render its own date/time picker controls to the corresponding input
type. If set to no, the native implementation will be disabled.
Method Detail
clearValue()
This method clears the text field's value, both in the DOM and within the JS object.
contentDidChange()
The contentDidChange method is automatically called by the observable when the
observable's state did change. It then updates the view's value property based
on the specified content binding.
This is a special implementation for M.TextFieldView.
disable()
This method disables the text field by setting the disabled property of its
html representation to true.
enable()
This method enables the text field by setting the disabled property of its
html representation to false.
{String}
getValue()
This method returns the text field view's value.
- Returns:
- {String} The text field view's value.
gotFocus(id, event, nextEvent)
This method is called whenever the view gets the focus.
If there is a initial text specified and the value of this text field
still equals this initial text, the value is emptied.
- Parameters:
- {String} id
- The DOM id of the event target.
- {Object} event
- The DOM event.
- {Object} nextEvent
- The next event (external event), if specified.
handleTap(id, event, nextEvent)
This method is called whenever the view is taped/clicked. Typically a text
field view would not use a tap event. But since a tap is called before the
focus event, we use this to do some input type depending stuff, e.g. show
a date picker.
- Parameters:
- {String} id
- The DOM id of the event target.
- {Object} event
- The DOM event.
- {Object} nextEvent
- The next event (external event), if specified.
lostFocus(id, event, nextEvent)
This method is called whenever the view lost the focus.
If there is a initial text specified and the value of this text field
is empty, the value is set to the initial text.
- Parameters:
- {String} id
- The DOM id of the event target.
- {Object} event
- The DOM event.
- {Object} nextEvent
- The next event (external event), if specified.
registerEvents()
This method is responsible for registering events for view elements and its child views. It
basically passes the view's event-property to M.EventDispatcher to bind the appropriate
events.
It extend M.View's registerEvents method with some special stuff for text field views and
their internal events.
setValue(value, delegateUpdate, preventValueComputing)
This method sets the text field's value, initiates its re-rendering
and call the delegateValueUpdate().
- Parameters:
- {String} value
- The value to be applied to the text field view.
- {Boolean} delegateUpdate
- Determines whether to delegate this value update to any observer or not.
- {Boolean} preventValueComputing
- Determines whether to execute computeValue() or not.
setValueFromDOM(id, event, nextEvent)
This method sets its value to the value it has in its DOM representation
and then delegates these changes to a controller property if the
contentBindingReverse property is set.
Additionally call target / action if set.
- Parameters:
- {String} id
- The DOM id of the event target.
- {Object} event
- The DOM event.
- {Object} nextEvent
- The next event (external event), if specified.