Skip to content

Commit c41acad

Browse files
NickIlievNickIliev
authored
Merge pull request #260 from NativeScript/niliev/text-field
Niliev/text field
2 parents 6dd2aa5 + be4fff0 commit c41acad

File tree

4 files changed

+136
-6666
lines changed

4 files changed

+136
-6666
lines changed

‎app/ui-category/text-field/basic-text-field/article.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
HTML
1+
TextField provides multiple properties and several events for handling the user input and interaction.
2+
To submit a value use the `returnPress` event along with the `returnKeyType` property.
3+
To handle a TextFiled being focused use the `focus` event.
4+
To handle an interaction when the user leaves TextField use the `blur` event.
5+
To explicitly show and hide a keyboard, we can call the methods `focus` and `dismissSoftInput`.
6+
27
<snippet id='sample-ui-textfield-html'/>
38

4-
Handle TextField returnPress event
59
<snippet id='textfield-handle-submit-event'/>

‎app/ui-category/text-field/basic-text-field/basic-text-field.component.html

Lines changed: 85 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,86 @@
1-
<!-- >> sample-ui-textfield-html -->
2-
<GridLayout rows="*" columns="*" sdkExampleTitle sdkToggleNavButton>
3-
<ScrollView row="0" col="0">
4-
<GridLayout rows="*" columns="*">
5-
<StackLayout class="form">
6-
<StackLayout class="input-field">
7-
<Label class="label" text="Focused TextField" row="1" col="0" textWrap="true"></Label>
8-
<TextField class="input input-border" id="firstTextFieldId" hint="Focused TextField" text="" row="1" col="1"></TextField>
9-
</StackLayout>
10-
<StackLayout class="input-field">
11-
<Label class="label" text="Autocapitalization" row="2" col="0" textWrap="true"></Label>
12-
<TextField class="input input-border" #stf hint="allCharacters" autocorrect="false" text="" autocapitalizationType="allCharacters"
13-
row="2" col="1"></TextField>
14-
<TextField class="input input-border" #stf hint="none" autocorrect="false" text="" autocapitalizationType="none" row="3"
15-
col="1"></TextField>
16-
<TextField class="input input-border" #stf hint="sentences" autocorrect="false" text="" autocapitalizationType="sentences"
17-
row="4" col="1"></TextField>
18-
<TextField class="input input-border" #stf hint="words" autocorrect="false" text="" autocapitalizationType="words" row="5"
19-
col="1"></TextField>
20-
</StackLayout>
21-
<StackLayout class="input-field">
22-
<Label class="label" text="Passwords field" row="6" col="0" textWrap="true"></Label>
23-
<TextField class="input input-border" hint="Default" autocorrect="false" secure="true" text="" row="6" col="1" returnKeyType="next"></TextField>
24-
<TextField class="input input-border" hint="With text color" hintColor="#cc0000" color="#cc0000" autocorrect="false" secure="true"
25-
text="" row="7" col="1" returnKeyType="next"></TextField>
26-
</StackLayout>
27-
<StackLayout class="input-field">
28-
<Label class="label" text="Keyboard types" row="8" col="0" textWrap="true"></Label>
29-
<TextField class="input input-border" autocorrect="false" hint="done" text="" row="8" col="1" returnKeyType="done"></TextField>
30-
<TextField class="input input-border" autocorrect="false" hint="go" text="" row="9" col="1" returnKeyType="go"></TextField>
31-
<TextField class="input input-border" autocorrect="false" hint="next" text="" row="10" col="1" returnKeyType="next"></TextField>
32-
<TextField class="input input-border" autocorrect="false" hint="search" text="" row="11" col="1" returnKeyType="search"></TextField>
33-
<TextField class="input input-border" autocorrect="false" hint="send" text="" row="12" col="1" returnKeyType="send"></TextField>
34-
</StackLayout>
35-
<StackLayout class="input-field">
36-
<Label class="label" text="Auto-correct" row="13" col="0" textWrap="true"></Label>
37-
<TextField class="input input-border" autocorrect="true" hint="With auto-correct" text="" row="13" col="1" returnKeyType="next"></TextField>
38-
<TextField class="input input-border" autocorrect="false" hint="Without auto-correct" text="" row="14" col="1" returnKeyType="next"></TextField>
39-
</StackLayout>
40-
<StackLayout class="input-field">
41-
<Label class="label" text="Setting Max text length(max 3 characters)" textWrap="true"></Label>
42-
<TextField class="input input-border" maxLength="3" hint="With maxLength" text="" returnKeyType="done"></TextField>
43-
<Label class="label" text="Setting Max text length(max 3 characters) with secure='true'" textWrap="true"></Label>
44-
<TextField class="input input-border" maxLength="3" hint="maxLength with secure='true'" text="" secure="true" returnKeyType="done"></TextField>
45-
</StackLayout>
46-
<StackLayout class="input-field">
47-
<Label class="label" text="Colors and Border style" row="15" col="0" textWrap="true"></Label>
48-
<TextField class="input input-border" autocorrect="false" hint="Default hint color" text="" row="15" col="1" returnKeyType="next"></TextField>
49-
<TextField class="input input-border" autocorrect="false" style.placeholderColor="#0066cc" hint="Hint text color" text="" row="16"
50-
col="1" returnKeyType="next"></TextField>
51-
<TextField class="input input-border" autocorrect="false" hint="Default hint color" text="Default text color" row="17" col="1"
52-
returnKeyType="next"></TextField>
53-
<TextField class="input input-border" autocorrect="false" hint=" Blue Text Color" color="#0066cc" text="Text color" row="18"
54-
col="1" returnKeyType="next"></TextField>
55-
<TextField class="input" autocorrect="false" hint="Set Border Width" text="Set Border Width" borderWidth="5" borderColor="#6666ff"
56-
row="19" col="1" returnKeyType="next"></TextField>
57-
<TextField class="input" autocorrect="false" hint="Green Border Color" text="Green Border Color" borderWidth="2" borderColor="#339933"
58-
row="20" col="1" returnKeyType="next"></TextField>
59-
<TextField class="input" autocorrect="false" hint="Set Border Radius" text="Set Border Radius" borderWidth="2" borderRadius="40"
60-
borderColor="#6666ff" row="21" col="1" returnKeyType="next"></TextField>
61-
</StackLayout>
62-
<StackLayout class="input-field">
63-
<Label class="label" text="TextAlignment" row="22" col="0" textWrap="true"></Label>
64-
<TextField class="input input-border" autocorrect="false" hint="left" text="left" textAlignment="left" row="22" col="1" returnKeyType="next"></TextField>
65-
<TextField class="input input-border" autocorrect="false" hint="center" text="center" textAlignment="center" row="23" col="1"
66-
returnKeyType="next"></TextField>
67-
<TextField class="input input-border" autocorrect="false" hint="right" text="right" textAlignment="right" row="24" col="1"
68-
returnKeyType="next"></TextField>
69-
</StackLayout>
70-
<StackLayout class="input-field">
71-
<Label class="label" text="FontSize" row="25" col="0" textWrap="true"></Label>
72-
<TextField class="input input-border" autocorrect="false" hint="Set FontSize" text="" fontSize="27" row="25" col="1" returnKeyType="next"></TextField>
73-
</StackLayout>
74-
<StackLayout class="input-field">
75-
<Label class="label" text="FontFamily" row="26" col="0" textWrap="true"></Label>
76-
<TextField autocorrect="false" fontFamily="serif" hint="serif" text="serif" class="input input-border" row="26" col="1" returnKeyType="next"></TextField>
77-
<TextField autocorrect="false" fontFamily="sans-serif" hint="sans-serif" text="sans-serif" class="input input-border" row="27" col="1" returnKeyType="next"></TextField>
78-
<TextField autocorrect="false" fontFamily="monospace" hint="monospace" text="monospace" class="input input-border" row="28" col="1" returnKeyType="next"></TextField>
79-
</StackLayout>
80-
<StackLayout class="input-field">
81-
<Label class="label" text="Date" row="29" col="0" textWrap="true"></Label>
82-
<TextField class="input input-border" id="textFieldBDate" hint="Enter date" [text]='birthDate | date:"MM/dd/yy"' (tap)="showDatePicker()"
83-
row="29" col="1" returnKeyType="done" (returnPress)="submit()"></TextField>
84-
</StackLayout>
85-
</StackLayout>
86-
</GridLayout>
87-
</ScrollView>
88-
<StackLayout backgroundColor="white" [visibility]="isItemVisible ? 'visible' : 'collapsed'" row="0" col="0">
89-
<DatePicker class="m-15" id="datePicker" #dp [visibility]="isItemVisible ? 'visible' : 'collapsed'"></DatePicker>
90-
<Button class="btn btn-primary btn-active" text="Tap to enter the date" (tap)="enterDate()" [visibility]="isButtonVisible ? 'visible' : 'collapsed'"></Button>
1+
<ScrollView sdkExampleTitle sdkToggleNavButton>
2+
<StackLayout class="form">
3+
<StackLayout class="input-field">
4+
<Label class="label" text="Focused TextField" textWrap="true"></Label>
5+
<TextField class="input input-border" (loaded)="firstTfLoaded($event)" hint="Focused TextField" text=""></TextField>
6+
</StackLayout>
7+
<StackLayout class="input-field">
8+
<Label class="label" text="Autocapitalization" textWrap="true"></Label>
9+
<TextField class="input input-border" #stf hint="allCharacters" autocorrect="false" text="" autocapitalizationType="allCharacters"></TextField>
10+
<TextField class="input input-border" #stf hint="none" autocorrect="false" text="" autocapitalizationType="none"></TextField>
11+
<TextField class="input input-border" #stf hint="sentences" autocorrect="false" text="" autocapitalizationType="sentences"></TextField>
12+
<TextField class="input input-border" #stf hint="words" autocorrect="false" text="" autocapitalizationType="words"></TextField>
13+
</StackLayout>
14+
<StackLayout class="input-field">
15+
<Label class="label" text="Passwords field" row="6" col="0" textWrap="true"></Label>
16+
<TextField class="input input-border" hint="Default" autocorrect="false" secure="true" text="" returnKeyType="next"></TextField>
17+
<TextField class="input input-border" hint="With text color" hintColor="#cc0000" color="#cc0000" autocorrect="false" secure="true"
18+
text="" returnKeyType="next"></TextField>
19+
</StackLayout>
20+
<StackLayout class="input-field">
21+
<Label class="label" text="Keyboard types" row="8" col="0" textWrap="true"></Label>
22+
<TextField class="input input-border" autocorrect="false" hint="done" text="" returnKeyType="done"></TextField>
23+
<TextField class="input input-border" autocorrect="false" hint="go" text="" returnKeyType="go"></TextField>
24+
<TextField class="input input-border" autocorrect="false" hint="next" text="" returnKeyType="next"></TextField>
25+
<TextField class="input input-border" autocorrect="false" hint="search" text="" returnKeyType="search"></TextField>
26+
<TextField class="input input-border" autocorrect="false" hint="send" text="" returnKeyType="send"></TextField>
27+
</StackLayout>
28+
<StackLayout class="input-field">
29+
<Label class="label" text="Auto-correct" row="13" col="0" textWrap="true"></Label>
30+
<TextField class="input input-border" autocorrect="true" hint="With auto-correct" text="" returnKeyType="next"></TextField>
31+
<TextField class="input input-border" autocorrect="false" hint="Without auto-correct" text="" returnKeyType="next"></TextField>
32+
</StackLayout>
33+
<StackLayout class="input-field">
34+
<Label class="label" text="Setting Max text length(max 3 characters)" textWrap="true"></Label>
35+
<TextField class="input input-border" maxLength="3" hint="With maxLength" text="" returnKeyType="done"></TextField>
36+
<Label class="label" text="Setting Max text length(max 3 characters) with secure='true'" textWrap="true"></Label>
37+
<TextField class="input input-border" maxLength="3" hint="maxLength with secure='true'" text="" secure="true" returnKeyType="done"></TextField>
38+
</StackLayout>
39+
<StackLayout class="input-field">
40+
<Label class="label" text="Colors and Border style" row="15" col="0" textWrap="true"></Label>
41+
<TextField class="input input-border" autocorrect="false" hint="Default hint color" text="" returnKeyType="next"></TextField>
42+
<TextField class="input input-border" autocorrect="false" style.placeholderColor="#0066cc" hint="Hint text color" text=""
43+
returnKeyType="next"></TextField>
44+
<TextField class="input input-border" autocorrect="false" hint="Default hint color" text="Default text color" returnKeyType="next"></TextField>
45+
<TextField class="input input-border" autocorrect="false" hint=" Blue Text Color" color="#0066cc" text="Text color" returnKeyType="next"></TextField>
46+
<TextField class="input" autocorrect="false" hint="Set Border Width" text="Set Border Width" borderWidth="5" borderColor="#6666ff"
47+
returnKeyType="next"></TextField>
48+
<TextField class="input" autocorrect="false" hint="Green Border Color" text="Green Border Color" borderWidth="2" borderColor="#339933"
49+
returnKeyType="next"></TextField>
50+
<TextField class="input" autocorrect="false" hint="Set Border Radius" text="Set Border Radius" borderWidth="2" borderRadius="40"
51+
borderColor="#6666ff" returnKeyType="next"></TextField>
52+
</StackLayout>
53+
<StackLayout class="input-field">
54+
<Label class="label" text="TextAlignment" row="22" col="0" textWrap="true"></Label>
55+
<TextField class="input input-border" autocorrect="false" hint="left" text="left" textAlignment="left" returnKeyType="next"></TextField>
56+
<TextField class="input input-border" autocorrect="false" hint="center" text="center" textAlignment="center" returnKeyType="next"></TextField>
57+
<TextField class="input input-border" autocorrect="false" hint="right" text="right" textAlignment="right" returnKeyType="next"></TextField>
58+
</StackLayout>
59+
<StackLayout class="input-field">
60+
<Label class="label" text="FontSize" textWrap="true"></Label>
61+
<TextField class="input input-border" autocorrect="false" hint="Set FontSize" text="" fontSize="27" returnKeyType="next"></TextField>
62+
</StackLayout>
63+
<StackLayout class="input-field">
64+
<Label class="label" text="FontFamily" row="26" col="0" textWrap="true"></Label>
65+
<TextField autocorrect="false" fontFamily="serif" hint="serif" text="serif" class="input input-border" returnKeyType="next"></TextField>
66+
<TextField autocorrect="false" fontFamily="sans-serif" hint="sans-serif" text="sans-serif" class="input input-border" returnKeyType="next"></TextField>
67+
<TextField autocorrect="false" fontFamily="monospace" hint="monospace" text="monospace" class="input input-border" returnKeyType="next"></TextField>
68+
</StackLayout>
69+
<StackLayout class="input-field">
70+
<Label class="label" text="Date" textWrap="true"></Label>
71+
<!-- >> sample-ui-textfield-html -->
72+
<TextField hint="Enter date"
73+
[text]='birthDate | date:"MM/dd/yy"'
74+
secure="false"
75+
keyboardType="datetime"
76+
returnKeyType="done"
77+
(returnPress)="onReturnPress($event)"
78+
autocorrect="false"
79+
maxLength="10"
80+
(focus)="onFocus($event)"
81+
(blur)="onBlur($event)"
82+
class="input input-border"></TextField>
83+
<!-- << sample-ui-textfield-html -->
84+
</StackLayout>
9185
</StackLayout>
92-
</GridLayout>
93-
<!-- << sample-ui-textfield-html -->
86+
</ScrollView>

‎app/ui-category/text-field/basic-text-field/basic-text-field.component.ts

Lines changed: 45 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,62 @@
1-
// >> textfield-handle-submit-event
2-
import { Component, OnInit } from "@angular/core";
3-
import { DatePicker } from "ui/date-picker";
1+
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
42
import { TextField } from "ui/text-field";
5-
import { Page } from "ui/page";
63
import { setTimeout } from "timer";
74

85
@Component({
96
moduleId: module.id,
10-
// >> (hide)
117
styleUrls: ["./../text-field.style.css"],
12-
// << (hide)
138
templateUrl: "./basic-text-field.component.html"
149
})
15-
export class BasicTextFieldComponent implements OnInit {
10+
export class BasicTextFieldComponent {
1611

17-
public birthDate;
18-
public isButtonVisible = false;
19-
public isItemVisible = false;
20-
21-
constructor(private page: Page) {
22-
}
23-
24-
ngOnInit() {
25-
let datePicker = this.page.getViewById<DatePicker>("datePicker");
26-
datePicker.year = 1980;
27-
datePicker.month = 2;
28-
datePicker.day = 9;
29-
datePicker.minDate = new Date(1975, 0, 29);
30-
datePicker.maxDate = new Date(2045, 4, 12);
31-
32-
let firstTextfield: TextField = <TextField> this.page.getViewById("firstTextFieldId");
33-
firstTextfield.focus();
34-
35-
}
36-
37-
enterDate() {
38-
let datePicker = this.page.getViewById<DatePicker>("datePicker");
39-
let selectedDate = new Date(datePicker.year, datePicker.month - 1, datePicker.day);
40-
this.birthDate = selectedDate;
41-
this.isButtonVisible = false;
42-
this.isItemVisible = false;
12+
// >> textfield-handle-submit-event
13+
firstTfLoaded(args) {
14+
let firstTextfield = <TextField>args.object;
15+
setTimeout(() => {
16+
firstTextfield.focus(); // Shows the soft input method, ususally a soft keyboard.
17+
}, 100);
4318
}
4419

45-
showDatePicker() {
46-
let textFielsBDate = this.page.getViewById<TextField>("textFieldBDate");
47-
this.isButtonVisible = true;
48-
this.isItemVisible = true;
49-
50-
setTimeout(function() {
51-
textFielsBDate.dismissSoftInput();
20+
onReturnPress(args) {
21+
// returnPress event will be triggered when user submits a value
22+
let textField = <TextField>args.object;
23+
24+
// Gets or sets the placeholder text.
25+
console.log(textField.hint);
26+
// Gets or sets the input text.
27+
console.log(textField.text);
28+
// Gets or sets the secure option (e.g. for passwords).
29+
console.log(textField.secure);
30+
31+
// Gets or sets the soft keyboard type. Options: "datetime" | "phone" | "number" | "url" | "email"
32+
console.log(textField.keyboardType);
33+
// Gets or sets the soft keyboard return key flavor. Options: "done" | "next" | "go" | "search" | "send"
34+
console.log(textField.returnKeyType);
35+
// Gets or sets the autocapitalization type. Options: "none" | "words" | "sentences" | "allcharacters"
36+
console.log(textField.autocapitalizationType);
37+
38+
// Gets or sets a value indicating when the text property will be updated.
39+
console.log(textField.updateTextTrigger);
40+
// Gets or sets whether the instance is editable.
41+
console.log(textField.editable);
42+
// Enables or disables autocorrection.
43+
console.log(textField.autocorrect);
44+
// Limits input to a certain number of characters.
45+
console.log(textField.maxLength);
46+
47+
setTimeout(() => {
48+
textField.dismissSoftInput(); // Hides the soft input method, ususally a soft keyboard.
5249
}, 100);
53-
5450
}
5551

56-
submit() {
57-
let textFielsBDate = this.page.getViewById<TextField>("textFieldBDate");
58-
this.isButtonVisible = true;
59-
this.isItemVisible = true;
60-
61-
setTimeout(function() {
62-
textFielsBDate.dismissSoftInput();
63-
}, 100);
52+
onFocus(args) {
53+
// focus event will be triggered when the users enters the TextField
54+
let textField = <TextField>args.object;
6455
}
6556

57+
onBlur(args) {
58+
// blur event will be triggered when the user leaves the TextField
59+
let textField = <TextField>args.object;
60+
}
61+
// << textfield-handle-submit-event
6662
}
67-
// << textfield-handle-submit-event

0 commit comments

Comments
 (0)