ユーザーインターフェイス / コンポーネント / テキストフィールド

テキストフィールド

TextFieldコンポーネントを使用すると、アプリにテキストを入力できます。 TextFieldには、パスワードフィールドを処理するためのsecureや、コントロールが使用するテキスト形式を指定するためのsecureなどの属性があります。

TextField

使用法

<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" loaded="onPageLoaded">
	<Page.actionBar>
		<ActionBar title="Getting Started" />
	</Page.actionBar>
	<StackLayout>
		<TextField loaded="onTextFieldLoaded" hint="Enter Date" text="{{viewDate}}" secure="false" keyboardType="datetime" returnKeyType="done" autocorrect="false" maxLength="10" />
	</StackLayout>
</Page>
const observableModule = require("tns-core-modules/data/observable");
function onNavigatingTo(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    vm.set("viewDate", "");

    page.bindingContext = vm;
}
function onTextFieldLoaded(argsloaded) {
    const view = argsloaded.object;
    view.on("returnPress", (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);
    });
    view.on("focus", (args) => {
        const textField = args.object;
        console.log("On TextField focus");
    });
    view.on("blur", (args) => {
        const textField = args.object;
        console.log("On TextField blur");
    });
}
exports.onNavigatingTo = onNavigatingTo;
exports.onTextFieldLoaded = onTextFieldLoaded;
import {Observable} from "tns-core-modules/data/observable";
import {Page} from "tns-core-modules/ui/page";
import {TextField} from "tns-core-modules/ui/text-field";

export function onNavigatingTo(args) {
    const page: Page = <Page> args.object;
    const vm = new Observable();
    vm.set("tvText", "");
    page.bindingContext = vm;
}
export function onTextFieldLoaded(argsloaded) {
    let view: TextField = <TextField> argsloaded.object;
    view.on("returnPress", (args) => {
        // returnPress event will be triggered when user submits a value
        let textField = <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);
    });
    view.on("focus", (args) => {
        let textField: TextField = <TextField> args.object;
        console.log("On TextView focus");
    });
    view.on("blur", (args) => {
        let textField: TextField = <TextField> args.object;
        console.log("On TextView blur");
    });
}

デモソース

スタイリング

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

デモソース

コードビハインドによるTextFieldコンポーネントの作成

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

プロパティ

名前タイプ説明
autocapitalizationType"AutocapitalizationType"Auto Capitalizationタイプを取得または設定します。
autocorrectboolean自動修正を有効または無効にします。
keyboardType"KeyboardType"ソフトキーボードの種類を取得または設定します
letterSpacingnumber文字スペーススタイルプロパティを取得または設定します。
lineHiehgtnumber行の高さのスタイルプロパティを取得または設定します。
maxLengthnumber入力として許可される最大文字数を取得または設定します。
returnKeyTypeReturnKeyTypeソフトキーボードのリターンキーのタイプを取得または設定します。
securestringテキストフィールドがパスワード入力用かどうかを取得または設定します。
textstringテキストを取得または設定します。
textAlignmentTextAlignmentテキストの配置を取得または設定します。
textDecorationTextDecorationテキスト装飾を取得または設定します。
textTransformTextTransformテキスト変換を取得または設定します。
whiteSpaceWhiteSpace空白スタイルのプロパティを取得または設定します。

メソッド

名前説明
focusビューにフォーカスを移動することを試みます。このビューまたはその子孫の1つが実際にフォーカスを取得したかどうかを示す値を返します。返り値はbooleanです。
dismissSoftInputソフト入力方式（通常はソフトキーボード）を非表示にします。

イベント

名前説明
blurテキストフィールドがフォーカスされていないときに生成されます。
focusテキストフィールドにフォーカスがあるときに生成されます。
returnPressリターンキーがタップされたときに生成されます。
textChange新しいテキスト入力があるときに生成されます。

APIリファレンス

名前タイプ
tns-core-modules/ui/text-fieldModule
TextFieldClass

ネイティブコンポーネント

ANDROID IOS
android.widget.EditText UITextField
入門
コアコンセプト
ユーザーインターフェース
ツール
ハードウェアアクセス
プラグインの開発
リリース
アプリテンプレート
パフォーマンスの最適化
フレームワークモジュール
ガイド
サポートを受ける
トラブルシューティング
Siedkick
NativeScriptドキュメントのライセンス