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 autocapitalizationType for specifying the text format the control should use.

const textFieldModule = require("tns-core-modules/ui/text-field");

Basics

Return press, Focus, Blur Events

TextField provides multiple properties and several events for handling the user input and interaction. To submit a value use the returnPress event along with the returnKeyType property. To handle a TextFiled being focused use the focus event. To handle an interaction when the user leaves TextField use the blur event. To explicitly show and hide a keyboard, we can call the methods focus and dismissSoftInput.

<TextField hint="Enter date" 
        text='{{testDate, testDate | dateConverter(dateFormat)}}' 
        secure="false"
        keyboardType="datetime"
        returnKeyType="done" 
        returnPress="onReturnPress"
        autocorrect="false"
        maxLength="10"
        focus="onFocus" 
        blur="onBlur" 
        class="input input-border"/>
function firstTfLoaded(args) {
    const firstTextfield = args.object;
    setTimeout(() => {
        firstTextfield.focus(); // Shows the soft input method, ususally a soft keyboard.
    }, 100);
}

function onReturnPress(args) {
    // returnPress event will be triggered when user submits a value
    const textField = args.object;
    // Gets or sets the placeholder text.
    console.log(textField.hint);
    // Gets or sets the input text.
    console.log(textField.text);
    // Gets or sets the secure option (e.g. for passwords).
    console.log(textField.secure);

    // Gets or sets the soft keyboard type. Options: "datetime" | "phone" | "number" | "url" | "email"
    console.log(textField.keyboardType);
    // Gets or sets the soft keyboard return key flavor. Options: "done" | "next" | "go" | "search" | "send"
    console.log(textField.returnKeyType);
    // Gets or sets the autocapitalization type. Options: "none" | "words" | "sentences" | "allcharacters"
    console.log(textField.autocapitalizationType);

    // Gets or sets a value indicating when the text property will be updated.
    console.log(textField.updateTextTrigger);
    // Gets or sets whether the instance is editable.
    console.log(textField.editable);
    // Enables or disables autocorrection.
    console.log(textField.autocorrect);
    // Limits input to a certain number of characters.
    console.log(textField.maxLength);

    setTimeout(() => {
        textField.dismissSoftInput(); // Hides the soft input method, ususally a soft keyboard.
    }, 100);
}

function onFocus(args) {
    // focus event will be triggered when the users enters the TextField
    console.log("onFocus event");
}

function onBlur(args) {
    // blur event will be triggered when the user leaves the TextField
    const textField = args.object;
    textField.dismissSoftInput();
    console.log("onBlur event");
}

exports.onNavigatingTo = onNavigatingTo;
exports.firstTfLoaded = firstTfLoaded;
exports.firstTfLoaded = firstTfLoaded;
exports.onReturnPress = onReturnPress;
exports.onFocus = onFocus;
exports.onBlur = onBlur;

Return Key Type

The widgets that inherit from EditableTextBase, i.e., TextField, have a returnKeyType property that gets or sets the soft keyboard return key type. Possible values are contained in the ReturnKeyType enumeration.

Done

<TextField class="input input-border" autocorrect="false" hint="done" text="" returnKeyType="done"/>

Next

<TextField class="input input-border" autocorrect="false" hint="next" text="" returnKeyType="next"/>

Go

<TextField class="input input-border" autocorrect="false" hint="go" text="" returnKeyType="go"/>
<TextField class="input input-border" autocorrect="false" hint="search" text="" returnKeyType="search"/>

Send

<TextField class="input input-border" autocorrect="false" hint="send" text="" returnKeyType="send"/>

Improve this document

Demo Source


Binding

This example shows how to bind TextField text, hint and secure properties as well as how to handle the text change.

XML

<Button text="{{ buttonText }}" class="btn btn-primary btn-active" tap="textFieldSecureStateChange"></Button>
<Button text="Show text" class="btn btn-outline btn-active" tap="showText"></Button>
<StackLayout class="input-field">
    <Label text="{{ 'Result: ' + tfResult}}" textWrap="true" />

    <Label text="Enter text:" class="label"></Label>
    <TextField hint="{{ tfHint }}" text="{{ tfText }}" secure="{{ secureState }}"/>

</StackLayout>

JavaScript

function onNavigatingTo(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    vm.set("firstSwitchResult", true);
    vm.set("firstSwitch", true);
    vm.set("secondSwitchResult", false);
    vm.set("secondSwitch", false);
    vm.set("thirdSwitchResult", true);
    vm.set("thirdSwitch", true);
    // handling Switch checked change
    vm.on(observableModule.Observable.propertyChangeEvent, (propertyChangeData) => {
        switch (propertyChangeData.propertyName) {
            case "firstSwitch":
                vm.set("firstSwitchResult", propertyChangeData.value);
                break;
            case "secondSwitch":
                vm.set("secondSwitchResult", propertyChangeData.value);
                break;
            case "thirdSwitch":
                vm.set("thirdSwitchResult", propertyChangeData.value);
                break;

            default:
                break;
        }
    });
    page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;

Improve this document

Demo Source


Code Behind

Creating TextField via Code-Behind and setting up its properties.

XML

<StackLayout id="stackLayoutId">
    <Button text="{{ secureButton }}" tap="{{ onTap }}" />
            <Label text="{{ 'Result: ' + tfResult}}" textWrap="true" />

</StackLayout>

JavaScript

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;

Improve this document

Demo Source


Keyboard Type

<Button text="{{ buttonText }}" class="btn btn-primary btn-active" tap="textFieldSecureStateChange"></Button>
<Button text="Show text" class="btn btn-outline btn-active" tap="showText"></Button>
<StackLayout class="input-field">
    <Label text="{{ 'Result: ' + tfResult}}" textWrap="true" />

    <Label text="Enter text:" class="label"></Label>
    <TextField hint="{{ tfHint }}" text="{{ tfText }}" secure="{{ secureState }}"/>

</StackLayout>

Keyboard Type

The widgets that inherit from EditableTextBase, i.e., TextField, have a keyboardType property that gets or sets the soft keyboard type that will be shown while in edit mode. Possible values are contained in the KeyboardType enumeration. In the below given examnples are demostrated, how to set up the needed Keyboard types for both iOS and Android.

Datetime

<Label text="{{ 'Result(datetime): ' + tfDateTimeResult}}" textWrap="true" />
<TextField hint="Enter date" keyboardType="datetime" text="{{ tfDateTimeText }}" />

Phone

<Label text="{{ 'Result(phone): ' + tfPhoneResult}}" textWrap="true" />
<TextField hint="Enter phone number" keyboardType="phone" text="{{ tfPhoneText }}" />

Number

<Label text="{{ 'Result(number): ' + tfNumberResult}}" textWrap="true" />
<TextField hint="Enter number" keyboardType="number" text="{{ tfNumberText }}" />

Url

<Label text="{{ 'Result(url): ' + tfUrlResult}}" textWrap="true" />
<TextField hint="Enter url" keyboardType="url" text="{{ tfUrlText }}" />

Email

Improve this document

Demo Source


API Reference for the TextField Class

Native Component

Android iOS
android.widget.EditText UITextField