html输入密码正确后实现弹窗,仿微信输入支付密码的弹窗
微信输入支付密码的弹窗效果相信大家都见过吧,先描述下它的特点(这里先不做微信支付的时候选择支付方式这一块):
1.模态显示,背景灰色,点击背景弹窗消失。
2.提供输入的密码框是看不到光标的,在文本框上长按的时候是可以看到放大镜,但是禁止赋值粘贴等操作。
3.输入密码的文本框是有分隔线的,而且会用黑色的圆点来替代输入的字符。
4.密码为6位数字,当用户输入够6位数字之后弹窗自动消失,然后判断密码正确性,就相当于点击了确认按钮。
下面讲具体实现:
1.首先,这里用到了一个第三方库的WTReTextField,这个类是UITextField的一个子类,可以通过设置它的pattern来限制文本框填充内容的格式,比如我们可以设置它可以输入像xxx xxxx xxxx这样格式的手机号码。在这里,我们限制它填充的内容为6为数字,不能输入其他非法字符。
2.我们定义一个YLPasswordTextFiled继承自WTReTextField。在这个类里面,重写了-(void)setFrame:(CGRect)frame方法,在这里面用UILabel控件来作为占位符(即在输入数字的时候显示的黑色圆点)刚开始这些占位符是隐藏的,当输入内容后显示,用户输入多少个字符就对应显示多少个黑点:
-(void)setFrame:(CGRect)frame
{
[super setFrame:frame];
CGFloatperWidth = (frame.size.width-kPasswordLength+1)*1.0/kPasswordLength;
for(NSIntegeri=0;i
if(i
UILabel*vLine = (UILabel*)[self viewWithTag:kLineTag+ i];
if(!vLine){
vLine = [[UILabel alloc]init];
vLine.tag=kLineTag+ i;
[self addSubview:vLine];
}
vLine.frame=CGRectMake(perWidth + (perWidth +1)*i,0,1, frame.size.height);
vLine.backgroundColor= [UIColor grayColor];
}
UILabel*dotLabel = (UILabel*)[self viewWithTag:kDotTag+ i];
if(!dotLabel){
dotLabel = [[UILabel alloc]init];
dotLabel.tag=kDotTag+ i;
[self addSubview:dotLabel];
}
dotLabel.frame=CGRectMake((perWidth +1)*i + (perWidth -10)*0.5, (frame.size.height-10)*0.5,10,10);
dotLabel.layer.masksToBounds=YES;
dotLabel.layer.cornerRadius=5;
dotLabel.backgroundColor= [UIColorblackColor];
dotLabel.hidden=YES;
}
}
为了防止用户赋值粘帖,重写了-(BOOL)canPerformAction:(SEL)action withSender:(id)sender:
//禁止复制粘帖
-(BOOL)canPerformAction:(SEL)action withSender:(id)sender{
UIMenuController *menuController = [UIMenuController sharedMenuController];
if(menuController){
menuController.menuVisible=NO;
}
return NO;
}
这样就基本完成了供输入密码的文本框的构造。
3.定义一个LMPopInputPasswordView继承自UIView,这个是弹出视图,并定义一个LMPopInputPassViewDelegate委托和委托方法-(void)buttonClickedAtIndex:(NSUInteger)index withText:(NSString*)text;来传递用户输入的内容。
4.通过设置_textFiled.tintColor= [UIColorclearColor];//看不到光标
_textFiled.textColor= [UIColorclearColor];//看不到输入内容
来让用户看不到文本框的输入内容以及光标。
5.通过[_textFiledaddTarget:selfaction:@selector(textFiledEdingChanged)forControlEvents:UIControlEventEditingChanged];为文本框绑定事件,并通过以下方法来控制几个黑点的显示和隐藏,并且在输入密码长度等于6的时候调用点击确定按钮事件对应的方法:
-(void)textFiledEdingChanged
{
NSIntegerlength =_textFiled.text.length;
NSLog(@"lenght=%li",(long)length);
if(length==kPasswordLength){
[self buttonClickedAction:_ensureButton];
}
for(NSIntegeri=0;i
UILabel*dotLabel = (UILabel*)[_textFiled viewWithTag:kDotTag+ i];
if(dotLabel){
dotLabel.hidden= length <= i;
}
}
}
6.最后再为LMPopInputPasswordView添加动画弹出和动画消失的转场动画:
#pragma mark ---animation methods
-(void)fadeIn
{
self.transform=CGAffineTransformMakeScale(1.3,1.3);
self.alpha=0;
[UIView animateWithDuration:.35animations:^{
self.alpha=1;
self.transform=CGAffineTransformMakeScale(1,1);
}completion:^(BOOLfinished) {
[_textFiled becomeFirstResponder];
}];
}
- (void)fadeOut
{
[self endEditing:YES];
[UIView animateWithDuration:.35animations:^{
self.transform=CGAffineTransformMakeScale(1.3,1.3);
self.alpha=0.0;
}completion:^(BOOLfinished) {
if(finished) {
[_overlayView removeFromSuperview];
[self removeFromSuperview];
}
}];
}
- (void)pop
{
UIWindow*keywindow = [[UIApplication sharedApplication]keyWindow];
[keywindow addSubview:_overlayView];
[keywindow addSubview:self];
self.center=CGPointMake(keywindow.bounds.size.width/2.0f,
keywindow.bounds.size.height/2.0f-100);
[self fadeIn];
}
- (void)dismiss
{
[self fadeOut];
}
7.最后在点击按钮的时候调用委托方法,传递用户输入的密码,然后弹窗消失:
-(void)buttonClickedAction:(UIButton*)sender
{
//传值给委托对象
if([_delegaterespondsToSelector:@selector(buttonClickedAtIndex:withText:)]){
[_delegate buttonClickedAtIndex:sender.tag withText:_textFiled.text];
}
[selfdismiss];
}
效果图如下:
html输入密码正确后实现弹窗,仿微信输入支付密码的弹窗相关推荐
- 仿微信输入支付密码的弹窗
仿微信输入支付密码的弹窗 微信输入支付密码的弹窗效果相信大家都见过吧,先描述下它的特点(这里先不做微信支付的时候选择支付方式这一块): 1.模态显示,背景灰色,点击背景弹窗消失. 2.提供输入的密码框 ...
- 仿微信支付宝支付密码
仿微信支付宝支付密码 效果图: 一.主要知识点 GridLayout的应用 EditText的textCursorDrawable的应用 InputMethodManager的应用 TextWatch ...
- 仿支付宝输入支付密码2(带动画)
由于用对话框做输入支付密码会出现宽度无法充满,这次我用popwindow来做,功能效果更加容易扩展:这次提供源码噢,有兴趣的可以下载去参考下,带动画噢: 先看看效果图把: 主界面只有这么简单,就不多在 ...
- android支付宝支付微信支付封装,Android仿支付宝微信支付密码界面弹窗封装dialog...
一,功能效果 二,实现过程 1,先写xml文件:dialog_keyboard.xml 注意事项 (1),密码部分用的是一个线性布局中6个TextView,并设置android:inputType=& ...
- android银行卡输入密码,android 仿微信添加银行卡时输入支付密码
最近了解到了BottomSheetBehavior,感觉是个很有意思的布局,刚好项目中有实际场景可以应用,就拿它来实现了,下面是我们要实现的最终效果: gif.gif 底部的键盘布局呢,就是采用的Bo ...
- js多方框输入密码_js仿支付宝多方框输入支付密码效果
上次看到别人说写一个类似支付宝支付密码的输入框效果,今天就想自己写了试试看,大体功能是实现了. 已实现部分:1. 焦点会随着输入数值往后推移 2. 如果输入的非0-9,则会出现提示 3. 按Backs ...
- Android自定义控件开发系列(三)——仿支付宝六位支付密码输入页面
在移动互联领域,有那么几家龙头一直是我等学习和追求的目标,比如支付宝.微信.饿了么.酷狗音乐等等,大神举不胜举,他们设计的界面.交互方式已经培养了中国(有可能会是世界)民众的操作习惯:举个小例子,对话 ...
- android wear支付宝6,Android自定义View仿支付宝输入六位密码功能
跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义 ...
- 微信忘记支付密码,实名认证的身份证又没有办理银行卡怎么破?(未解决)
老妈微信忘记支付密码,微信已实名认证过,又没有用自己的身份证办理过银行卡.如何在不办理银行卡的情况下,解决忘记支付密码的问题呢?
最新文章
- [iOS]如何重新架构 JPVideoPlayer ?
- java substring 性能_《Java程序性能优化》subString()方法的内存泄露
- CVPR2019--Binary Ensemble Neural Network--二值CNN网络集成
- Linux企业生产环境用户权限集中管理项目方案案例
- k8s灰度更新_k8s slb如何实现灰度发布-问答-阿里云开发者社区-阿里云
- OpenCV相交凸intersectConvex的实例(附完整代码)
- 获取当前窗口是否可见 document.visibilityState
- 很少人知道,但是非常实用的 Python 库
- 警示:一个update语句引起大量gc等待和业务卡顿
- 蓝桥杯基础练习十六进制转十进制
- typora 有道云笔记_有道云—目前最好用的免费笔记
- Python JavaScript 的数组去重
- jquery修改带!important的css样式
- 最简单例子图解JVM内存分配和回收(转)
- static 和 const的解释(转载)
- css做计算器,CSS3 纯CSS计算器
- 联想服务器改win7系统教程,联想台式机10代cpu改win7系统详细教程
- ipad无法加入网络怎么办?
- ipv6文件服务器,在IPV6网络如何创建FTP服务器
- 【python】爬取植物数据库
热门文章
- Deepin下安装scrapy报错fatal error: Python.h: 没有那个文件或目录
- 使用RPA机器人快速实现表格数据汇总
- 管理系统页面布局 html,二十五个精美的后台管理界面模板和布局
- 洛谷千题复习计划(一)(Codeforces + AtCoder)
- 嵌入式GUI及其开发工具——miniGUI和mStudio
- Duplicate Cleaner - 重复文件 / 相似文件扫描
- AE基础之添加点、线、面要素
- CSS3中perspective、perspective-origin、transform-style: preserve-3d和transform中的rotate详细解释、纯CSS3动画正方体贴图
- 禁止ios字体调整大小
- 实践+收藏版——Linux 性能优化知识点总结大全!