Text

API Reference

Overview

UI-related text control is a one-line input field with a label.

Initialization

{view:"text", value:"dummy@email.com", label:"Email", inputAlign:"right", 
    labelAlign:"right"},
{view:"text", type:"password", value:"123pass", label:"Password", inputAlign:"right", 
    labelAlign:"right"}

Related sample:  Text Input ('text')

Main properties

  • value (string, number) - the initial value for a text field, can be editable or readonly on your choice.
  • label (string) - text label of a control. It can be customized by:
    • labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed to the left of the control;
    • labelWidth (number) - width of the label container;
    • labelPosition (string) - defines label position related to the input field. There are two possible values: "left" (the default one) and "top".
  • inputAlign (string) - input alignment towards its container. Possible values are "left" and "right". An input is left-aligned by default.
  • type (string)- type of a text field, can be either "text" by default, or "password" or "email". Type is vital for HTML5 input data validation.
  • placeholder (string) - the initial text in the text field, disappears as you start typing in it.
  • suggest (array, string) - collection of suggest values, or the ID of an attached suggest list with these values.
  • pattern (object, string) - a formatting pattern applied to a text input, if set as object, contains two properties:
    • mask - a string that includes "#" signs for input characters (can be restricted by the allow parameter) and pattern symbols, such as hyphens, dots, spaces, etc.
    • allow - a set of characters that are allowed for entering into the field regardless of their position
  • format (string) - a number format applied to a text input. See the details below.

Using HTML Attributes

At the same time, "text" properties can be set via the attributes object containing properties that coincide with HTML input tag properties. The object is used for HTML5 data validation.

  • attributes (object)
    • maxlength (number) - the maximum quantity of symbols that can be typed into the text field;
    • required (boolean) - indicates whether this field must be filled before the form can be submitted. False by default;
    • title (string) - a prompt message that appears on moving a cursor over the field.

The same functionality is true for Textarea.

Setting Number Format

You can set the format for entering number values into input fields with the help of the format property.

You need to specify the value of the format attribute as a string, define a delimiter for groups of digits and set a delimiter that will separate the decimal part in the float numbers according to the rules of the local language. It is also possible to define any optional separator for numbers. For example:

{ view:"text", value:"12345678", name:"b", label:"Comma", format:"1.111,00" },
{ view:"text", value:"12345678", name:"c", label:"Dot", format:"1'111.000" },
{ view:"text", value:"12345678", name:"d", label:"Numbers", format:"1-11" }

Related sample:  Text Input with Number format

Related Articles

Back to top