MobileText
Overview
The MobileText component allows the user to display a single line text element.
Specification
Property
Here is a list of properties that can be used for modifying the component:
Name | Type | Default | Description | Remark |
---|---|---|---|---|
className | string | "" | Component class name | |
error | string | "" | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
id | string | "" | Component id name | |
label | string | "" | Label for the component | Label will not be displayed if unspecified or left empty |
placeholder | string | "" | Placeholder text for entry example | |
prefix | string | "" | Text to be displayed before the input text | |
suffix | string | "" | Text to be displayed after the input text | |
textAlign | string | "left" | Text alignments | Available options: "left" : Justified to the left "right" : Justified to the right |
value | string | "" | Text to be displayed | |
disabled | boolean | false | Enable/Disable the component | |
requiredIcon | boolean | false | Show/Hide the required icon | |
visible | boolean | true | Show/Hide the component |
Event
Here is a list of events that can be specified:
Name | Type | Description | Remark |
---|---|---|---|
change | function | Event handler when the value has been changed | It will pass the event object as the argument You can receive the following values in event.detail event.detail.oldValue : Value before the change event.detail.value : Value after the change |
focus | function | Event handler for the focused time | It will pass the event object as the argument You can receive the following values in event.detail event.detail.value : Value at the time of focus |
input | function | Event handler when the value has been inputting | It will pass the event object as the argument You can receive the following values in event.detail event.detail.data : Value of inserted characters event.detail.value : Value of target element *Notes on the value of "event.detail.data" It is inserted characters when inserting text It will be "null" when inserting by "Paste" or "Drag and Drop" or pressing "Enter", "Delete", or "Backspace" |
Constructor
MobileText(options)
Here is a list of available constructors:
Parameter
Name | Type | Default | Description | Remark |
---|---|---|---|---|
options | object | {} | Object that includes component properties |
Sample Code
tip
Please check the package installation method first.
Here is a sample code when all parameters are specified:
const Kuc = Kucs['1.x.x'];
const space = kintone.mobile.app.record.getSpaceElement('space');
const mobileText = new Kuc.MobileText({
label: 'Fruit',
requiredIcon: true,
value: 'Apple',
placeholder: 'Apple',
prefix: '$',
suffix: 'yen',
textAlign: 'left',
error: 'Error occurred!',
className: 'options-class',
id: 'options-id',
visible: true,
disabled: false
});
space.appendChild(mobileText);
mobileText.addEventListener('change', event => {
console.log(event);
});
mobileText.addEventListener('focus', event => {
console.log(event);
});
mobileText.addEventListener('input', event => {
console.log(event);
});