v 1.1.3

modo.InputText

The text input control can be used for different occasions. Use the type parameter to tweak it to any kind of input you need (eg. search, mail, ...).

Tip: it provides easy event-names for different keyboard events, like "keydown:enter".

Constructor

modo.InputText(params)modo.InputText

The following list of parameters can be used in the params object, passed to the constructor. Parameters in [brackets] are optional.

PropertyDescription

[type]

Chose any kind of text input type from the W3C specification. Default = 'text' You can also use textarea as input type which generates a <textarea> tag, instead of a <input> tag.

[placeholder]

A placeholder text to be displayed when no user input was made.

[autogrow]

Only available when you use the textarea type. This will make the textarea automatically grow and shrink depending of the amount of text in it. Default = false.

[changeThreshold]

Amount of milliseconds to wait after the latest keydown before triggering the change event. Default: 500ms

Makes it easier to avoid model updates and pushes to the server on EVERY key press of the user.

[value]

A initial value to fill the element with, OR a function that returns a value. The function is called when you bind the element to a Backbone Model and want to generate the elements value from that model.

Example:

value: function(model){
    return model.get('firstName') + ' ' + model.get('lastName');
}

Heads up: Two-way bindings are impossible if such a function is set.

[model]

A Backbone Model object you want to bind the Element to.

[modelKey]

The key of the Backbone Model to be observed on changes. This is only needed if you want to get a two-way binding of a specific property of a model. Omit this and specify a value function if you only want to feed model changes into the element.

[disabled]

Disables the element right at construction time. (Handy for usage with modo.generate()

[className]

A string with custom CSS classes to apply to the generated DOM element

[dataAttributes]

A object with attributes to assign to the generated DOM element. Omit the "data-" part. So for example {count: 1} becomes data-count="1" on the DOM element.

[el]

The jQuery enhanced DOM element to be generated. If nothing is set, a standard DIV container will be created. If you want to use a different DOM element, pass a jQuery generated DOM element to this parameter.

[showEffect]

The default show effect for the element. See associated property description. Default: null

[hideEffect]

The default hide effect for the element. See associated property description. Default: null

Properties

Inherited Properties from modo.Element

elObject

Contains the jQuery enhanced DOM Node of this modoJS element.

modoIdNumber

Contains a internally given, numeric ID for this element.

visibleBool

Will be set by .show() and .hide(). Access this property to check the current visibility of the element.

showEffectobject

Set a default show effect (like the options you can pass to the show() / hide() methods.

Example:

element.showEffect = {
    effect: 'slideDown',
    effectArgs: ['fast']
};

hideEffectobject

Define a default hide effect instead of a simple, instant hide.

Methods

get()string

Returns the textfields current value.

set(value)this

Sets the textfield to the given value. Will trigger the backbone event change.

focus()this

Sets the user input cursor to the textinput. Will trigger the Backbone event focus.

blur()this

Removes the user input cursor to the textinput. Will trigger the Backbone event blur.

select([start], [length])this

Select a part of the input texts value. Can be called in different ways:

Param "start" and "length" omitted

Everything will be selected

Param "start" given, "length" omitted

Starts the selection start characters from the left - selects everything to the end.

Param start and length given

Selection starts start characters from the left with a length of length characters.

disable()this

Disables the input text and blocks it from user input.

enable()this

Enables the input text and accepts user input.

Inherited Methods from modo.Element

setFlexible([value])this

Pass either true or false to this value to make the element stretch inside a modo.FlexContainer element.

show(options)this

Make the connected DOM object visible and trigger the Backbone Event "show".

You can control the way the element is shown by passing an object of options.

Example:

element.show({
    effect: 'slideDown',
    effectArgs: ['fast']
});

hide()this

Make the connected DOM object invisible and trigger the Backbone Event "hide".

You can control the hide effect the same way as with the show() method.

addClass(classname, doPrefix)this

Will add another class name to the DOM element. The class name will be automatically prefixed (i.e. with mdo-) if doPrefix = true (default).

removeClass(classname, doPrefix)this

Will remove a class name from the DOM element. The class name will be automatically prefixed.

addClassTemporary(classname, timeout, doPrefix)this

Helps with adding a classname temporarily to the object. Just call this method and after the specified amount of time, the added class(es) will be removed.


Note: All modoJS Objects are extended with all methods of the Backbone.Events class.


Events

change(value)

The event is triggered, when the text-fields value is either changed by calling the set() function, or when a user has made an input. The event is fired when no keystrokes have been made for a specified amount of time.

keydown(event)

The event is triggered, whenever a key is pressed by a user. You can listen to only specific keys, by listening to keydown:[keycode], or use a key alias, for example: keydown:enter.

Available aliases are: enter, escape, alt, ctrl, shift, up, down, left, right, backspace, del, end, pos1, paste, tab.

Event parameterDescription

event

The javascript event object.

focus

Triggered, when a user clicks into the textinput, or focus() has been called.

blur

Triggered, when a user clicks away from the textinput, or blur() has been called.

disable

Triggered, when the element got disabled.

enable

Triggered, when the element got enabled.

Inherited Events from modo.Element

show

Triggered, when the object has been displayed through show()

hide

Triggered, when the object has been hidden through hide()

CSS Classes

mdo-inputtext

Applied on the element.

mdo-inputtext-[TYPE]

Depends on the type property passed to the elements constructor. So for example when using the type textarea, the class name will be mdo-inputtext-textarea.

mdo-placeholded

If the browser doesn't support the HTML5 placeholder attribute, the element will try to mimic it. If the placeholder text is displayed, the mdo-placeholded class is applied as well, to enable you to style the placeholded text.

Inherited CSS Classes from modo.Element

mdo-element

Basic class that will be applied to every element that extends modo.Element.

mdo-flexible

Will be applied to every modo element where setFlexible(true) has been called upon.

comments powered by Disqus