DecSoft App Builder

Number input description

The Number input control allows to get a number input from the user. This is an specific input control, that causes that in some platforms, the appropriate keyboard are shown to the user, in this case a keyboard with numbers only. A possible alternative to this control can be the Range input control. There are other specific input controls like the Email input, Phone input, Color input, etc.

Remember the importance to validate all the user input, not only in the client side (that is, in the same app), but also in the server side, if we send that user input to the app server. The rule is not to trust in the user input, and validate all the input to assert that we have the expected possible values.

Number input CSS rules

This control has a default style, and, some control JavaScript properties (see below), can also changes the control style, not to mention the Classes property, that you can use to establish one or more CSS classes to be applied to the control.

In addition to that style, you can also set custom CSS rules for the control by using the IDE controls style inspector. If this is not enough, you can include any number of CSS stylesheets in the app by using the app files manager.

If you want to use CSS stylesheets, you need to know how to refer to the control, so take a look at the Runtime selectors help topic.

Number input at designtime

The Number input control put at your disposition the below designtime properties or variables. Designtime means here that these properties are only available in designtime and not in runtime.

Number input at runtime

The Number input control put at your disposition the below runtime properties or variables. You can set almost all these variables in designtime, and, they are also available to be use when the app is running. Note that we named here these variables in a capitalized way, because is like you can see it in the designtime control's inspector, however, at runtime we use the lower camel case way.

Number input events

The Number input control put at your disposition the below events handlers:

Number input designtime properties

Number input Top property

Designtime. Integer variable. The Top property stores the top position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Number input Left property

Designtime. Integer variable. The Left property stores the left position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Number input Width property

Designtime. Integer variable. The Width property stores the width of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Number input Height property

Designtime. Integer variable. The Height property stores the height of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Number input Locked property

Designtime. Boolean variable. The Locked property determines if the control can be moved or resized in app view designer or not. Set a "false" value mean the control can be moved and resized. Set a "true" value (by default) mean the control cannot be moved nor resized. Remember that this control property is only for designtime and is not available in runtime.

Number input runtime properties

Number input Name property

Runtime. String variable. The Name control property stores the name of the Number input control as you set in designtime. The Name property value must be unique for the same app view, dialog or frame, that is, it's possible to have more than one "input1" in the app, if that controls resides in different app views, dialogs or frames. Note that you must consider this variable as read only: change the name of a control in runtime can cause unexpected results.

Number input Event property

Runtime. Mixed variable. The Event control property stores the "event" variable received in all the control events. This variable can contain the target (HTML element of the control) that fire the event and more useful stuff.

Number input Title property

Runtime. String variable. The Title control property stores some small but descriptive text, mainly to be used to be show that text when the user place the mouse cursor into the control.

Number input Classes property

Runtime. String variable. The Classes control property stores one or more additionals CSS classes (space separated) to be applied to the control.

Number input Hidden property

Runtime. Boolean variable. The Hidden control property determines if the control appear visible to the user or not. Set to "true" to hide the control, or to "false" to show the control (by default).

Number input Disabled property

Runtime. Boolean variable. The Disabled control property determines if the control appear disabled to the user or not. Set to "true" to disable the control, or to "false" to enable the control (by default).

Number input Value property

Runtime. Number variable. The Value control property stores the text that is shown in the control, because has been typed by the user, or because is the designtime established value.

Number input Min property

Runtime. Number variable. The Min control property determines the minimum number to be accepted for the input value.

Number input Max property

Runtime. Number variable. The Max control property determines the maximum number to be accepted for the input value.

Number input Step property

Runtime. Number variable. The Step control property determines the ammount that the value is increased and decreased when the user slide the control to the left or to the right. So suposing an Step value of 10, the value of the control is increased by 10 when the user slide one step to the right, and the value of the control is decreased by 10 when the user slide one step to the left.

Number input Placeholder property

Runtime. String variable. The Placeholder control property stores the text that appear in the control if no value is set. This can be considered like a tip for the user about what is expected to be in the input control value.

Number input Readonly property

Runtime. Boolean variable. The Readonly control property determine if the control appear as readonly to the user or not. Set this variable to "true" to set the input control readonly, or set to "false" (by default) to allow the control to receive a new value entered by the user.

Number input Size property

Runtime. String variable. The Size control property determines the size of the Number input font. By default the Number input have the "sm" (small) size, and, you can use the available app constansts "app.size.*" to set this variable, for example:

Number input TabIndex property

Runtime. Number variable. The TabIndex variable of the Number input control determines how the browser / platform must deal with the control when the user press the TAB key. The default value for this variable is "0" (zero), which means that the control should be focusable in sequential keyboard navigation, but its order is defined by the document's order.

You can set this variable to a value of "-1", which means that the element should not be reachable via sequential keyboard navigation, but could be focused with JavaScript or visually. It's mostly useful to create accessible widgets with JavaScript.

A positive value for this variable means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" would be focused before tabindex="5", but after tabindex="3". If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source.

You can use the TabIndex order dialog to set this variable.

Number input events

Number input Change event

The Change event handler is fired when the user changes the value and then release the focus (changing to another, for example) of the input control. See also the available events variables.

Number input Focus event

The Focus event handler is fired when the when the Number input control receive the user focus. This event is the partner of the Blur event that you can see below. See also the available events variables.

Number input Blur event

The Blur event handler is fired when the when the Number input control loss the user focus. This event is the partner of the Focus event that you can see above. See also the available events variables.

Number input Copy event

The Number input control Copy event is fired when the user copy the value of the control using the appropriate platform keyboard shortcut or contextual menu, etc. See also the available events variables.

Number input Cut event

The Number input control Cut event is fired when the user cut the value of the control using the appropriate platform keyboard shortcut or contextual menu, etc. See also the available events variables.

Number input Paste event

The Number input control Paste event is fired when the user paste a value into the control using the appropriate platform keyboard shortcut or contextual menu, etc. See also the available events variables.

Number input KeyUp event

The Number input control KeyUp event is fired when the user release up a key in the keyboard while the control has the focus. You can find information about what key has been pressed, for example, using the Event variable which is available also in this control event. See also the available events variables.

Number input KeyDown event

The Number input control KeyDown event is fired when the user press a key while the control has the focus. You can find information about what key has been pressed, for example, using the Event variable which is available also in this control event. See also the available events variables.

Number input Click event

The Click event handler is fired when the user click or tap into the Number input control. See also the available events variables.

Number input DblClick event

The DblClick (Double Click) event handler is fired when the user double click or double tap into the Number input control. See also the available events variables.

Number input MouseUp event

The MouseUp event handler is fired when the user up the mouse into the Number input control. See also the available events variables.

Number input MouseDown event

The MouseDown event handler is fired when the user down the mouse into the Number input control. See also the available events variables.

Number input MouseMove event

The MouseMove event handler is fired when the user move the mouse into the Number input control. See also the available events variables.

Number input MouseEnter event

The MouseEnter event handler is fired when the user enter the mouse into the Number input control. See also the available events variables.

Number input MouseLeave event

The MouseLeave event handler is fired when the user leave the mouse from the Number input control. See also the available events variables.

Number input ContextMenu event

The ContextMenu event handler is fired when the browser must shown the context menu of the the Number input control, which occur when the user click with the right mouse button into the Number input control. See also the available events variables.

Number input events variables

The below JavaScript variables are available in all the referred Number input control events handlers:

Name Type Description
event Mixed This variable is received in almost all control events. You can use this variable to stop the propagation of the event, to access the HTML element who fire the event and more.
self Object Stores the control object. This is a shortcut to the control variable, and it's available since we are talking about specific control events.
view Object

Stores the current app view or dialog. This variable allow us to access to that view or dialog properties and methods and also their controls properties and methods. For example, you can access to a control properties using the variable "view.yourControlName", suposing the control is named "yourControlName".

views Object Stores all the loaded app views. Note that loaded views mean that the app views has been previously show to the user. It's possible to access to the app view controls properties like "views.view1.yourControlName", suposing the view is named "view1" and the control is named "yourControlName". In the same way we can access to other controls of the view and to other loaded views and their controls.
frames Object Stores all the app frames. You can use this variable to access to all the app frames and their controls.
dialogs Object Stores all the app dialogs. You can use this variable to access to all the app dialogs and their controls.
app Object Stores all the app properties and methods. You can use this variable to access to all the app properties and app methods.