Difference between revisions of "Input"
Jump to navigation
Jump to search
(16 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | {{UI Object Header}} | |
Input field that allows the user to input a text. | Input field that allows the user to input a text. | ||
Can be used with a [[submit]] button. | Can be used with a [[submit]] button. | ||
Requires an ID. | Requires an ID. | ||
+ | |||
+ | For a tutorial on using this object, see [[Working with Forms]] | ||
+ | |||
+ | [[File:UI Object input.png]] | ||
== Parameters == | == Parameters == | ||
+ | *'''id''': the object's ID, used by UISets | ||
*'''position''': the object's position. Use the pixels or rows and columns coordinates format | *'''position''': the object's position. Use the pixels or rows and columns coordinates format | ||
*'''css''': optional. Defines the CSS style for the input field | *'''css''': optional. Defines the CSS style for the input field | ||
+ | *'''type''': optional. Defines the input type, see [[#Input attributes|inputtype UI attribute]] | ||
== Syntax == | == Syntax == | ||
− | (input!id <position>; <css>) | + | (input!id <position>; [<css>]; [<type>]) |
+ | E.g. | ||
+ | (input!myinput r1c1; color:blue; password) | ||
+ | |||
+ | |||
+ | For a scrollable multiline input: | ||
+ | |||
+ | (input!myinput r1c1; overflow:scroll; multiline) | ||
== UI Attributes == | == UI Attributes == | ||
− | {{ | + | {{UI Object Attributes (Common)}} |
− | {{ | + | {{UI Object Attributes (Field)}} |
+ | ===Input attributes=== | ||
+ | {| class="wikitable" | ||
+ | !Name | ||
+ | !Value | ||
+ | !Description | ||
+ | |- | ||
+ | |||
+ | |rowspan="2"|changedelay | ||
+ | |<number> | ||
+ | |Sets the delay in milliseconds by which changes are detected. If the field is working in autosend mode, this value determines the delay between the last button press and the value being sent to the server | ||
+ | |- | ||
+ | |off | ||
+ | |If the field is working in autosend mode, values aren't sent on a delay, but only when the field loses the focus (also when the tab or enter keys are pressed) | ||
+ | |- | ||
+ | |||
+ | |cssstyle | ||
+ | |<css> | ||
+ | |Sets the field's CSS style | ||
+ | |- | ||
+ | |||
+ | |rowspan="2"|eraseicon | ||
+ | |true | ||
+ | |Show an erase icon that can be clicked to quickly erase the input's content | ||
+ | |- | ||
+ | |false | ||
+ | |Default: no erase icon | ||
+ | |- | ||
+ | |||
+ | |rowspan="3"|inputtype | ||
+ | |multiline | ||
+ | |Default behaviour. For input fields with more than a line. Use the height attribute on the css parameter to set the size | ||
+ | |- | ||
+ | |input | ||
+ | |Single line field | ||
+ | |- | ||
+ | |password | ||
+ | |hides typed characters | ||
+ | |- | ||
+ | |||
+ | |maxlength | ||
+ | |<number> | ||
+ | |Specify the maximum length that can be typed | ||
+ | |- | ||
+ | |||
+ | |rowspan="2"|readonly | ||
+ | |true | ||
+ | |Value not editable | ||
+ | |- | ||
+ | |false | ||
+ | |Default:editable | ||
+ | |- | ||
+ | |||
+ | |helptext | ||
+ | |<string> | ||
+ | |Text to show when the field is empty | ||
+ | |- | ||
+ | |||
+ | |validatekey | ||
+ | |<regular expression> | ||
+ | |A regular expression to be validated on a keypress. E.g. "[a-z]" will allow only lowercase letters. | ||
+ | Won't work on Android devices. | ||
+ | |- | ||
+ | |||
+ | |validatevalue | ||
+ | |<regular expression> | ||
+ | |A regular expression to be validated before the value is sent to the server. If the expression doesn't match the value, the previous value will be restored and the input will flash in red. E.g. "^([1-9][0-9]?|100|0)$" will allow only numbers from 0 to 100, without leading 0s. | ||
+ | |- | ||
+ | |||
+ | |value | ||
+ | |<string> | ||
+ | |Input value | ||
+ | |- | ||
+ | |||
+ | |} |
Latest revision as of 11:44, 19 May 2023
Input field that allows the user to input a text. Can be used with a submit button.
Requires an ID.
For a tutorial on using this object, see Working with Forms
Contents
Parameters
- id: the object's ID, used by UISets
- position: the object's position. Use the pixels or rows and columns coordinates format
- css: optional. Defines the CSS style for the input field
- type: optional. Defines the input type, see inputtype UI attribute
Syntax
(input!id <position>; [<css>]; [<type>])
E.g.
(input!myinput r1c1; color:blue; password)
For a scrollable multiline input:
(input!myinput r1c1; overflow:scroll; multiline)
UI Attributes
Common attributes
Name | Value | Description |
---|---|---|
pos | x<x>y<y> | Position specified as x/y coordinates. E.g. x-5y10 |
visible | true | Default. Show the object |
false | Hide the object | |
blink | true | slow | Blink the object at a slow speed |
fast | Blink the object at a fast speed | |
false | Stop the blinking | |
opacity | 0.0 ... 1.0 | Object opacity from 0 (not visible) to 1 (fully visible) |
rotation | 0 ... 360 | Object rotation in degrees. Images are rotated around the center point, all other objects are rotated around the top left corner |
Field attributes
Name | Value | Description |
---|---|---|
enabled | true | Field is enabled |
false | Field is disabled | |
autosend | true | Automatically sends the value on changes. It's the default behaviour when there are no submit objects on the page or in a parent container (if the field is inside a container). |
false | Won't send the value on changes. It's the default behaviour when there's a submit object on the page or in a parent container. | |
focus (deprecated, use page's focus attribute instead) | true | Focus the field. Only a single object should have this attribute at "true". |
false | Reset focus | |
rollback | true | Restores the previously saved value. |
rollbackenabled | true | Automatically restores the previous value on an error (if the value isn't valid or the remote request resolved in an error). |
false | Won't restore the value on errors. | |
error | true | Manually shows an error feedback on the field (won't modify the current field value). |
false | Hides the error visualization. |
Input attributes
Name | Value | Description |
---|---|---|
changedelay | <number> | Sets the delay in milliseconds by which changes are detected. If the field is working in autosend mode, this value determines the delay between the last button press and the value being sent to the server |
off | If the field is working in autosend mode, values aren't sent on a delay, but only when the field loses the focus (also when the tab or enter keys are pressed) | |
cssstyle | <css> | Sets the field's CSS style |
eraseicon | true | Show an erase icon that can be clicked to quickly erase the input's content |
false | Default: no erase icon | |
inputtype | multiline | Default behaviour. For input fields with more than a line. Use the height attribute on the css parameter to set the size |
input | Single line field | |
password | hides typed characters | |
maxlength | <number> | Specify the maximum length that can be typed |
readonly | true | Value not editable |
false | Default:editable | |
helptext | <string> | Text to show when the field is empty |
validatekey | <regular expression> | A regular expression to be validated on a keypress. E.g. "[a-z]" will allow only lowercase letters.
Won't work on Android devices. |
validatevalue | <regular expression> | A regular expression to be validated before the value is sent to the server. If the expression doesn't match the value, the previous value will be restored and the input will flash in red. E.g. "^([1-9][0-9]?|100|0)$" will allow only numbers from 0 to 100, without leading 0s. |
value | <string> | Input value |