【目标】
1、QQ号码文本框要有“请输入QQ号码”的提示(用户输入时会自动消失)
2、QQ密码文本框要有“请输入QQ密码”的提示(用户输入文字会自动消失)
3、QQ号码文本框只能输入数字
4、QQ密码文本框内容必须是暗文显示
5、点击登陆按钮后把QQ密码和QQ号码打印到控制台,退出键盘
【实现】
1、完成界面搭建
这个界面比较简单,需要在storyboard上搭建
1、 2个Label
“QQ号码” 和 “QQ密码”
2、 1个Button
“登陆”
3、 2个TextField
QQ密码输入和QQ号码输入
搭建完成如下
2、设置属性
1、键盘属性
a> QQ号码只能是数字键盘,设置QQ号码文本框的属性 KeyBoard Type 为 Number Pad.
b> QQ密码即可输入字符又可输入数字,设置其属性 KeyBoard Type 为 AsccII Capable.
2、文本提示
a> QQ号码文本框提示“请输入QQ号码”,设置其属性 PlaceHolder 为“请输入QQ号码”
b> QQ密码文本框提示“请输入QQ密码”,设置其属性 PlaceHolder 为“请输入QQ密码”
3、QQ密码暗文
暗文属性只要使能 Secure Text Entry 属性即可.
前四项功能只需要通过设置控件的属性就可以完成相应的功能,在这里可以增加一个功能就是clear button。
设置文本框的clear button 属性 为 Appears while eding 那么就可以在输入内容是显示一个clear button,一键
清除刚刚输入的文本内容。下图就完成的界面搭建,可以看到在输入框里输入内容的时候出现了clear button,这个
时候点击clear button会删除文本框里的所有数据。
3、监听按键
按下登陆按钮时需要进行两个操作,那么我们需要对登陆按钮进行监听,并且写出按键事件产生对应的handler
1> 输出文本框的内容到控制台
2> 退出键盘
1、输出文本框的内容到控制台
我们要输出文本框的内容到控制台那么首先要获取到文本框的内容,那么需要两个属性属性 qqNum 和 qqPassWord。
通过这两个属性来获取文本内容并打印到控制台:
NSLog(@" QQ number is %@; QQ passworld is %@",self.qqNum.text,self.qqPassWord.text);
2、退出键盘
键盘是由文本框在编辑的时候进行调出的,按键关闭遵循谁调出谁关闭的原则,取消第一响应者就可以将键盘退出。
// 退出键盘的第一种方式,取消第一响应者。
[self.qqNum resignFirstResponder];
[self.qqPassWord resignFirstResponder];
第二种方式用view的 endEditing:方法
// 退出键盘的第二种方式。
[self.view endEditing:YES];
相应事件代码完成,然后跟界面进行连线,整个功能完成,全部代码如下:
1 // 2 // ViewController.m 3 // 01-qq登陆 4 // 5 // Created by zhaoli on 15/8/8. 6 // Copyright (c) 2015年 hello. All rights reserved. 7 // 8 9 #import "ViewController.h" 10 11 @interface ViewController () 12 13 @property (weak, nonatomic) IBOutlet UITextField *qqNum; 14 @property (weak, nonatomic) IBOutlet UITextField *qqPassWord; 15 16 - (IBAction)login; 17 18 @end 19 20 @implementation ViewController 21 22 - (void)viewDidLoad { 23 [super viewDidLoad]; 24 // Do any additional setup after loading the view, typically from a nib. 25 } 26 27 - (void)didReceiveMemoryWarning { 28 [super didReceiveMemoryWarning]; 29 // Dispose of any resources that can be recreated. 30 } 31 32 /** 登陆*/ 33 - (IBAction)login { 34 // print qqNumber and qq password 35 NSLog(@" QQ number is %@; QQ passworld is %@",self.qqNum.text,self.qqPassWord.text); 36 37 38 // 退出键盘的第一种方式,取消第一响应者。 39 [self.qqNum resignFirstResponder]; 40 [self.qqPassWord resignFirstResponder]; 41 42 // 退出键盘的第二种方式。 43 [self.view endEditing:YES]; 44 } 45 @end