密码输入框实现流程简述

rubyshen 发布于2019-05-22 17:59 / 1341人阅读

摘要：首先想到输入框就避不开，所以我们的思路从开始发散。首先需要创建一个密码输入框，目的是可以弹起键盘，并且输入内容。

现在的 app 大部分会接入三方支付，同时也有一些 app 会选择一种充值模式，让用户把自己的资金存入 app 内，这样在用户需要在 app 中购买商品时，就能够用自己的钱包进行支付，在这里就会涉及到支付密码弹窗的实现，下面说一下对一个简单的密码支付弹窗实现过程。

首先想到输入框就避不开 UITextfield，所以我们的思路从 UITextfield 开始发散。

首先需要创建一个密码输入框，目的是可以弹起键盘，并且输入内容。

如果以 UItextfield 为基础，将输入内容设置为密文输入显示的话，展示出来的效果是会把内容挤在一起，所以需要监听输入框的输入内容，然后通过输入的内容进行相应判断，然后我们绘制好对应的小黑点，将其在"输入框"中显示。同时除了小黑点之外，我们还需要绘制对应的线框。

创建"密码输入框"

UIView *inputView = [[UIView alloc]init];
    inputView.backgroundColor = White_Color;
    inputView.layer.borderWidth = 1;
    inputView.layer.borderColor = UIColorFromRGB(0xb2b2b2).CGColor;
    [self.alertWhiteView addSubview:inputView];
    [inputView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.moneyLabel.mas_bottom).offset(19);
        make.centerX.equalTo(self.alertWhiteView);
        make.width.offset(squreWidth*6);
        make.height.offset(squreWidth);
        make.bottom.offset(-19);
    }];

绘制小黑点以及分割线

for (int i = 1; i<7; i++) {
        //  黑色点
        UIView *spotView = [[UIView alloc]initWithFrame:CGRectMake((i-1)*squreWidth+(squreWidth-dotWidth)/2, (squreWidth-dotWidth)/2, dotWidth, dotWidth)];
        spotView.backgroundColor = UIColorFromRGB(0x262122);
        // 切圆
        spotView.clipsToBounds = YES;
        spotView.layer.cornerRadius = dotWidth/2;
        // 隐藏，输入时再显示
        spotView.hidden = YES;
        [inputView addSubview:spotView];
        // 把小黑点按照顺序依次加入数组中
        [_dotArray addObject:spotView];
        if (i!=6) {
            // 分割线
            UIView *lineView = [[UIView alloc]initWithFrame:CGRectMake(i*squreWidth, 0, 1, squreWidth)];
            lineView.backgroundColor = UIColorFromRGB(0xb2b2b2);
            [inputView addSubview:lineView];
        }
        
    }

添加 UITextfield

// 密码输入框
    [self.passWordTextField mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.moneyLabel.mas_bottom).offset(19);
        make.centerX.equalTo(self.alertWhiteView);
        make.width.offset(squreWidth*6);
        make.height.offset(squreWidth);
        make.bottom.offset(-19);
    }];

懒加载方式：

    
// 懒加载方式    
- (UITextField *)passWordTextField{
    if (!_passWordTextField) {
        _passWordTextField = [[UITextField alloc]init];
        // 设置为纯数字键盘
        _passWordTextField.keyboardType = UIKeyboardTypeNumberPad;
        [self.alertWhiteView addSubview:_passWordTextField];
        // 默认隐藏
        _passWordTextField.hidden = YES;
        // 添加输入监听
        [_passWordTextField addTarget:self action:@selector(textFieldDidChange:)forControlEvents:UIControlEventEditingChanged];
    }
    return _passWordTextField;
}

监听键盘输入内容

// 键盘内容监听
- (void)textFieldDidChange:(UITextField *)textField{
    if (textField.text.length == 6) {
//        [MBProgressHUD showError:@"密码错误，请重新尝试"];
        if (self.completeBlock) {
            self.completeBlock(textField.text);
            [textField resignFirstResponder];
            textField.text = @"";
            
        }
        
    }
    
    if (textField.text.length == 7) {
        textField.text = [textField.text substringToIndex:1];
        for (int j = 0; j<_dotArray.count; j++) {
            UIView *view = _dotArray[j];
            view.hidden = YES;
        }
    
    }
    if (textField.text.length>0&&textField.text.length<7) {
        for (int j = 0; j<_dotArray.count; j++) {
            UIView *view = _dotArray[j];
  
            if (jelse{
                view.hidden = YES;
            }
        }
        
    }else{
        for (int j = 0; j<_dotArray.count; j++) {
            UIView *view = _dotArray[j];
            view.hidden = YES;
        }
    }
}

这里面比较关键的地方是：

自己绘制小黑点代替 passWordTextField 的内容，并添加到自定义的"密码输入框"中

当弹出密码输入框时，让 passWordTextField 变成第一响应者，弹起键盘

通过键盘的监听事件，内容进行相应判断，以及取出对应数量的小黑点来进行输入的展示

其他

在这里省略了很多步骤，只拿最关键的过程来描述，比如其他相关视图的创建，弹起的相关逻辑，以及输入完毕的回调处理，在这里就不一一赘述了

专线服务服务器托管密码输入框 ios密码输入框 Android密码输入框 html5实现输入框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6792.html

密码输入框实现流程简述

摘要：首先想到输入框就避不开，所以我们的思路从开始发散。首先需要创建一个密码输入框，目的是可以弹起键盘，并且输入内容。现在的 app 大部分会接入三方支付，同时也有一些 app 会选择一种充值模式，让用户把自己的资金存入 app 内，这样在用户需要在 app 中购买商品时，就能够用自己的钱包进行支付，在这里就会涉及到支付密码弹窗的实现，下面说一下对一个简单的密码支付弹窗实现过程。 showIm...

番茄西红柿 2019-05-23 15:18 评论0 收藏0
从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

摘要：前言见解有限，如有描述不当之处，请帮忙指出，如有错误，会及时修正。为什么要梳理这篇文章最近恰好被问到这方面的问题，尝试整理后发现，这道题的覆盖面可以非常广，很适合作为一道承载知识体系的题目。前言见解有限，如有描述不当之处，请帮忙指出，如有错误，会及时修正。为什么要梳理这篇文章？最近恰好被问到这方面的问题，尝试整理后发现，这道题的覆盖面可以非常广，很适合作为一道承载知识体系的题目...

kel 2019-08-22 15:18 评论0 收藏0
输入URL到浏览器显示页面的过程，搜集各方面资料总结一下

摘要：通用头部这也是开发人员见过的最多的信息，包括如下请求的服务器地址请求方式请求的返回状态码，如代表成功请求的远程服务器地址会转为譬如，在跨域拒绝时，可能是为，状态码为等当然，实际上可能的组合有很多。面试中经常会被问到这个问题吧，唉，我最开始被问到的时候也就能大概说一些流程。被问得多了，自己就想去找找这个问题的全面回答，于是乎搜了很多资料和网上的文章，根据那些文章写一个总结。写得不好...

adie 2019-08-23 13:39 评论0 收藏0
输入URL到浏览器显示页面的过程，搜集各方面资料总结一下

摘要：通用头部这也是开发人员见过的最多的信息，包括如下请求的服务器地址请求方式请求的返回状态码，如代表成功请求的远程服务器地址会转为譬如，在跨域拒绝时，可能是为，状态码为等当然，实际上可能的组合有很多。面试中经常会被问到这个问题吧，唉，我最开始被问到的时候也就能大概说一些流程。被问得多了，自己就想去找找这个问题的全面回答，于是乎搜了很多资料和网上的文章，根据那些文章写一个总结。写得不好...

RobinTang 2019-08-02 12:06 评论0 收藏0
输入URL到浏览器显示页面的过程，搜集各方面资料总结一下

摘要：通用头部这也是开发人员见过的最多的信息，包括如下请求的服务器地址请求方式请求的返回状态码，如代表成功请求的远程服务器地址会转为譬如，在跨域拒绝时，可能是为，状态码为等当然，实际上可能的组合有很多。面试中经常会被问到这个问题吧，唉，我最开始被问到的时候也就能大概说一些流程。被问得多了，自己就想去找找这个问题的全面回答，于是乎搜了很多资料和网上的文章，根据那些文章写一个总结。写得不好...

BingqiChen 2019-08-29 17:23 评论0 收藏0