众多App经常使用的短信验证码输入框，没有啥好介绍的。

效果展示

基本原理

多个UITextField组成的，输入完成后，进入下一个UITextField进行编辑操作，最后一个输入完成后进行校验。

思维导图.png

自定义SMSCodeTextField

创建FLSMSCodeTextField 继承自UITextField，重写UIKeyInput的- (void)deleteBackward;方法，增加自定义的UITextFieldDelegate

@protocol FLSMSCodeTextFieldDelegate <UITextFieldDelegate>
@optional;
/// 删除内容后的代理方法
/// @param textField 输入框
- (void)smsCodeTextFieldDeleteBackward:(FLSMSCodeTextField *)textField;

@end

@interface FLSMSCodeTextField : UITextField
/**
 删除的代理
 */
@property (nonatomic, assign) id<FLSMSCodeTextFieldDelegate> delegate;

@end

@implementation FLSMSCodeTextField

@dynamic delegate;

- (void)deleteBackward {
    [super deleteBackward];
    //删除操作的代理方法
    if (self.delegate && [self.delegate respondsToSelector:@selector(smsCodeTextFieldDeleteBackward:)]) {
        [self.delegate smsCodeTextFieldDeleteBackward:self];
    }
}

@end

FLSMSCodeEditView逻辑和代码

初始化

- (instancetype)init {
    if (self = [super init]) {
        [self p_initializeSubviews];
    }
    return self;
}

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self p_initializeSubviews];
    }
    return self;
}

- (void)p_initializeSubviews {
    self.textFieldArray = [NSMutableArray array];
    self.textFieldSeparatorLineArray = [NSMutableArray array];
    
    [self addSubview:self.contentView];
    [_contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.mas_equalTo(UIEdgeInsetsZero);
    }];
}

设置需要创建的输入框数量和完成后的回调

/**
 验证码输入框数量
 */
@property (nonatomic, assign) NSInteger codeEditCount;

/**
 验证码输入完成的回调
 */
@property (nonatomic, copy) void (^smsCodeEditFinishBlock)(NSString *smsCode);

#pragma mark - setter

- (void)setCodeEditCount:(NSInteger)codeEditCount {
    _codeEditCount = codeEditCount;
    NSAssert(codeEditCount >= 4, @"数量不能少于4个");
    for (NSInteger i = 0; i < codeEditCount; i ++) {
        FLSMSCodeTextField *textField = [[FLSMSCodeTextField alloc]init];
        textField.tag = i;
        textField.keyboardType = UIKeyboardTypeNumberPad;
        textField.font = UIFontBoldMake(40);
        textField.textColor = UIColorBlack;
        textField.tintColor = UIColorGreen;
        textField.textAlignment = NSTextAlignmentCenter;
        textField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
        textField.enabled = NO;
        textField.delegate = self;
        [textField addTarget:self action:@selector(p_textFieldEditingChangedAction:) forControlEvents:UIControlEventEditingChanged];
        
        [_contentView addSubview:textField];

        
        UIView *separatorLineView = [[UIView alloc]init];
        separatorLineView.backgroundColor = UIColorSeparator;
        [_contentView addSubview:separatorLineView];
        [separatorLineView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.right.mas_equalTo(textField);
            make.top.mas_equalTo(textField.mas_bottom).mas_offset(14.0);
            make.height.mas_equalTo(PixelOne);
            make.bottom.mas_equalTo(0.0);
        }];

        [_textFieldArray addObject:textField];
        [_textFieldSeparatorLineArray addObject:separatorLineView];
    }
    [_textFieldArray mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(0.0);
        make.height.mas_equalTo(40.0);
    }];
    [_textFieldArray mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:14.0 leadSpacing:0.0 tailSpacing:0.0];
}

输入内容时的逻辑判断方法

#pragma mark - Action

- (void)p_textFieldEditingChangedAction:(FLSMSCodeTextField *)textField {
    //判断是否为最后一个textField
    if (textField.tag == self.textFieldArray.count - 1 && textField.text.length > 0) {
        //判断text的长度
        textField.text = textField.text.length > 1 ? [textField.text substringFromIndex:1] : [textField.text substringWithRange:NSMakeRange(0, 1)];
        [textField resignFirstResponder];
        textField.enabled = NO;
        //判断SMSCode已经达到最大数量,且又增加更改
        if (self.smsCodeString.length == self.codeEditCount) {
            self.smsCodeString = [self.smsCodeString substringToIndex:self.smsCodeString.length - 1];
        }
        self.smsCodeString = [self.smsCodeString stringByAppendingString:textField.text];
        
        if (self.smsCodeEditFinishBlock) {
            self.smsCodeEditFinishBlock(self.smsCodeString);
        }
        QMUILog(NSStringFromClass(self.class), @"%@",self.smsCodeString);
        
    } else {
        if (![textField.text isEqualToString:@""]) {
            FLSMSCodeTextField *nextTF = self.textFieldArray[textField.tag + 1];
            nextTF.enabled = YES;
            if (textField.text.length > 1) {
                NSString *lengthString = textField.text;
                textField.text = [lengthString substringWithRange:NSMakeRange(0, 1)];
                nextTF.text = [lengthString substringWithRange:NSMakeRange(lengthString.length - 1, 1)];
                //判断是否是最后一个
                if (nextTF.tag == self.textFieldArray.count - 1 && textField.text.length > 0) {
                    [nextTF resignFirstResponder];
                    nextTF.enabled = NO;
                    self.smsCodeString = self.smsCodeString = [self.smsCodeString stringByAppendingString:nextTF.text];
                    if (self.smsCodeEditFinishBlock) {
                        self.smsCodeEditFinishBlock(self.smsCodeString);
                    }
                    QMUILog(NSStringFromClass(self.class), @"%@",self.smsCodeString);
                } else {
                    [nextTF becomeFirstResponder];
                }
            } else {
                [nextTF becomeFirstResponder];
            }
            textField.enabled = NO;

        }
        self.smsCodeString = @"";
        for (FLSMSCodeTextField *tf in self.textFieldArray) {
            if (tf.text.length > 0) {
                self.smsCodeString = [self.smsCodeString stringByAppendingString:tf.text];
            }
        }
    }
    
}

删除内容时的逻辑判断方法

#pragma mark - FLSMSCodeTextFieldDelegate

- (void)smsCodeTextFieldDeleteBackward:(FLSMSCodeTextField *)textField {
    if (textField.tag != 0 && !textField.text.length) {
        textField.enabled = NO;
        FLSMSCodeTextField *beforeTextField = self.textFieldArray[textField.tag - 1];
        beforeTextField.enabled = YES;
        [beforeTextField becomeFirstResponder];
    }
}

- (void)p_closeAllTextFieldEnabled {
    for (FLSMSCodeTextField *textField in self.textFieldArray) {
        textField.enabled = NO;
    }
}

点击编辑视图时，需要触发第一响应的方法

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [self p_closeAllTextFieldEnabled];
    if (self.smsCodeString.length) {
        if (self.smsCodeString.length == self.codeEditCount) {
            FLSMSCodeTextField *textField = self.textFieldArray.lastObject;
            textField.enabled = YES;
            [textField becomeFirstResponder];
        } else {
            FLSMSCodeTextField *textField = self.textFieldArray[self.smsCodeString.length];
            textField.enabled = YES;
            [textField becomeFirstResponder];
        }
        
    } else {
        FLSMSCodeTextField *textField = self.textFieldArray.firstObject;
        textField.enabled = YES;
        [textField becomeFirstResponder];
    }
    
}

最后

因为输入和删除都会触发p_textFieldEditingChangedAction方法，所以内部逻辑只针对输入内容时，删除内容会重新赋值smsCodeString，最后大家注意避免stringByAppendingString不能添加为空的字符串。

// 先置空smsCodeString，删除/输入时都会触发此方法
self.smsCodeString = @"";
for (VPSMSCodeTextField *tf in self.textFieldArray) {
     if (tf.text.length > 0) {
        self.smsCodeString = [self.smsCodeString stringByAppendingString:tf.text];
     }
}

以上就是一个简单的验证码的所有内容，以后追加输入框选中效果。