NativeScript Core

Text Field

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.

Usage

Improve this document

Demo Source


Styling

<TextField hint="Enter text" color="orangered" backgroundColor="lightyellow" />

Improve this document

Demo Source


Creating TextView component via Code-Behind

<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;
}

Properties

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.

Methods

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.

Events

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.

API References

Name Type
tns-core-modules/ui/text-field Module
TextField Class

Native Component

Android iOS
android.widget.EditText UITextField