The TextView
component can be used to type larger
text content in your app. The component can also be used show
any content by setting the editable
property to
false
.
<TextView loaded="onTextViewLoaded" hint="Enter Date" text="{{ viewDate }}" secure="false" keyboardType="datetime" returnKeyType="done" autocorrect="false" maxLength="10">
</TextView>
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 onTextViewLoaded(argsloaded) {
const textView = argsloaded.object;
textView.on("focus", (args) => {
const view = args.object;
console.log("On TextView focus");
});
textView.on("blur", (args) => {
const view = args.object;
console.log("On TextView blur");
});
}
exports.onNavigatingTo = onNavigatingTo;
exports.onTextViewLoaded = onTextViewLoaded;
import {Observable} from "tns-core-modules/data/observable";
import {Page} from "tns-core-modules/ui/page";
import {TextView} from "tns-core-modules/ui/text-view";
export function onNavigatingTo(args) {
const page: Page = <Page> args.object;
const vm = new Observable();
vm.set("viewDate", "");
page.bindingContext = vm;
}
export function onTextViewLoaded(argsloaded) {
let textView: TextView = <TextView> argsloaded.object;
textView.on("focus", (args) => {
let view: TextView = <TextView> args.object;
console.log("On TextView focus");
});
textView.on("blur", (args) => {
let view: TextView = <TextView> args.object;
console.log("On TextView blur");
});
}
<StackLayout id="stackLayoutId">
<Button text="Disable third TextView" tap="{{ onTap }}" />
</StackLayout>
function onNavigatingTo(args) {
const page = args.object;
const vm = new observableModule.Observable();
// changing TextView editable property value on button tap
vm.set("onTap", (btargs) => {
const button = btargs.object;
const thirdTextview = btargs.object.page.getViewById("thirdTextViewId");
thirdTextview.editable = !thirdTextview.editable;
if (thirdTextview.editable) {
button.text = "Disable third TextView";
} else {
button.text = "Enable third TextView";
}
});
page.bindingContext = vm;
}
function onPageLoaded(args) {
const page = args.object;
const vm = page.bindingContext;
const stackLayout = page.getViewById("stackLayoutId");
// creating new TextView and changing the hint
const firstTextview = new textViewModule.TextView();
firstTextview.hint = "Enter text";
// creating new TextView and binding the text property
const secondTextview = new textViewModule.TextView();
const options = {
sourceProperty: "text",
targetProperty: "secondTextProperty"
};
secondTextview.bind(options, vm);
vm.set("secondTextProperty", "Sample TextView text");
// creating new TextView and changing the text
const thirdTextview = new textViewModule.TextView();
thirdTextview.id = "thirdTextViewId";
thirdTextview.text = "Third TextView";
// adding the newly created TextViews in a StackLayout
stackLayout.addChild(firstTextview);
stackLayout.addChild(secondTextview);
stackLayout.addChild(thirdTextview);
}
exports.onNavigatingTo = onNavigatingTo;
exports.onPageLoaded = onPageLoaded;
export function onNavigatingTo(args) {
const page: Page = <Page> args.object;
const vm = new Observable();
// changing TextView editable property value on button tap
vm.set("onTap", (btargs) => {
const button: Button = <Button> btargs.object;
const thirdTextview = (<TextView>button.page.getViewById("thirdTextViewId"));
thirdTextview.editable = !thirdTextview.editable;
if (thirdTextview.editable) {
button.text = "Disable third TextView";
} else {
button.text = "Enable third TextView";
}
});
page.bindingContext = vm;
}
export function onPageLoaded(args) {
const page: Page = <Page> args.object;
const vm = page.bindingContext;
const stackLayout: StackLayout = <StackLayout> page.getViewById("stackLayoutId");
// creating new TextView and changing the hint
const firstTextview = new TextView();
firstTextview.hint = "Enter text";
// creating new TextView and binding the text property
const secondTextview = new TextView();
const options = {
sourceProperty: "text",
targetProperty: "secondTextProperty"
};
secondTextview.bind(options, vm);
vm.set("secondTextProperty", "Sample TextView text");
// creating new TextView and changing the text
const thirdTextview = new TextView();
thirdTextview.id = "thirdTextViewId";
thirdTextview.text = "Third TextView";
// adding the newly created TextViews in a StackLayout
stackLayout.addChild(firstTextview);
stackLayout.addChild(secondTextview);
stackLayout.addChild(thirdTextview);
}
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.
|
textChange |
Emitted when there is a new text input.
|