The TextField component allows you to type text in your app. The
TextField has attributes such as secure
for
handling password fields, and pipes
for specifying
the text format the control should use.
<TextField hint="Enter text" color="orangered" backgroundColor="lightyellow" />
<StackLayout id="stackLayoutId">
<Button text="{{ secureButton }}" tap="{{ onTap }}" />
<Label text="{{ 'Result: ' + tfResult}}" textWrap="true" />
</StackLayout>
function onPageLoaded(args) {
const page = args.object;
const vm = new observableModule.Observable();
const stackLayout = page.getViewById("stackLayoutId");
vm.set("username", "john");
vm.set("tfResult", "");
vm.set("secureButton", "TextField secure:(OFF)");
vm.set("secure", false);
// changing TextField secure property value on button tap
vm.set("onTap", (btargs) => {
const secure = vm.get("secure");
vm.set("secure", !secure);
if (secure) {
vm.set("secureButton", "TextField secure:(OFF)");
} else {
vm.set("secureButton", "TextField secure:(ON)");
}
});
// creating new TextField and binding the text property
const options = {
sourceProperty: "username",
targetProperty: "text"
};
const firstTextField = new textFieldModule.TextField();
firstTextField.updateTextTrigger = "textChanged";
firstTextField.bind(options, vm);
// registering for the TextField text change listener
firstTextField.on("textChange", (args) => {
vm.set("tfResult", args.object.text);
});
// creating new TextField and binding the secure property
const secondOptions = {
sourceProperty: "secure",
targetProperty: "secure"
};
const secondTextField = new textFieldModule.TextField();
secondTextField.bind(secondOptions, vm);
stackLayout.addChild(firstTextField);
stackLayout.addChild(secondTextField);
page.bindingContext = vm;
}
exports.onPageLoaded = onPageLoaded;
export function onPageLoaded(args) {
const page = <Page>args.object;
const vm = new Observable();
const stackLayout: StackLayout = <StackLayout>page.getViewById("stackLayoutId");
vm.set("username", "john");
vm.set("tfResult", "");
vm.set("secureButton", "TextField secure:(OFF)");
vm.set("secure", false);
// changing TextField secure property value on button tap
vm.set("onTap", (btargs) => {
const secure = vm.get("secure");
vm.set("secure", !secure);
if (secure) {
vm.set("secureButton", "TextField secure:(OFF)");
} else {
vm.set("secureButton", "TextField secure:(ON)");
}
});
// creating new TextField and binding the text property
const options = {
sourceProperty: "username",
targetProperty: "text"
};
const firstTextField = new TextField();
firstTextField.updateTextTrigger = "textChanged";
firstTextField.bind(options, vm);
// registering for the TextField text change listener
firstTextField.on("textChange", (argstf) => {
vm.set("tfResult", (<TextField>argstf.object).text);
});
// creating new TextField and binding the secure property
const secondOptions = {
sourceProperty: "secure",
targetProperty: "secure"
};
const secondTextField = new TextField();
secondTextField.bind(secondOptions, vm);
stackLayout.addChild(firstTextField);
stackLayout.addChild(secondTextField);
page.bindingContext = vm;
}
Name |
Type |
Description |
autocapitalizationType |
AutocapitalizationType
|
Gets or sets the autocapitalization type.
|
autocorrect |
boolean |
Enables or disables autocorrection. |
keyboardType |
KeyboardType
|
Gets or sets the soft keyboard type |
letterSpacing |
number |
Gets or sets letter space style property.
|
lineHeight |
number |
Gets or sets line height style property.
|
maxLength |
number |
Gets or sets the max number of symbols allowed as input.
|
returnKeyType |
ReturnKeyType
|
Gets or sets the soft keyboard return key flavor.
|
secure |
string |
Gets or sets if a text field is for password entry.
|
text |
string |
Gets or sets the text. |
textAlignment |
TextAlignment |
Gets or sets the text alignment. |
textDecoration |
TextDecoration |
Gets or sets the text decoration. |
textTransform |
TextTransform |
Gets or sets the text transform. |
whiteSpace |
WhiteSpace |
Gets or sets white space style property.
|
Name |
Description |
focus |
Tries to focus the view. Returns a value indicating
whether this view or one of its descendants actually took
focus. Returns boolean .
|
dismissSoftInput |
Hides the soft input method, ususally a soft keyboard.
|
Name |
Description |
blur |
Emitted when the text field is unfocused.
|
focus |
Emitted when the text field is focused.
|
returnPress |
Emitted when the return key is tapped. |
textChange |
Emitted when there is a new text input.
|