原文位址:http://www.jianshu.com/p/6abf4891ba30
最近項目要做一個綁定銀行卡的功能,于是我打開微信和支付寶瞄了一眼,對比後發現微信和支付寶在卡号輸入的一些細節上處理是不一樣的,舉個例子:輸入卡号的時候,我發現中間有一位數輸錯了,然後試着去修改,微信的處理是删除完這個數字,光标直接移動到末尾。。這不科學啊,我還沒有修改完呢。。而支付寶的處理就比較合理了,删除完後光标還在那個位置,可以繼續輸入正确的數字。
本着虛心學習的态度,就想着怎麼實作支付寶的這個效果比較好的卡号輸入,本以為很簡單,可以很快搞定,最後卻用了大半天才實作了比較完美的效果。廢話不多說,直接上代碼:
/**
* UITextField Category 用于控制光标位置
*/
@interface UITextField (ExtendRange)
- (NSRange)selectedRange;
- (void)setSelectedRange:(NSRange)range;
@end
@implementation UITextField (ExtendRange)
- (NSRange)selectedRange {
UITextPosition *beginning = self.beginningOfDocument;
UITextRange *selectedRange = self.selectedTextRange;
UITextPosition *selectionStart = selectedRange.start;
UITextPosition *selectionEnd = selectedRange.end;
const NSInteger location = [self offsetFromPosition:beginning toPosition:selectionStart];
const NSInteger length = [self offsetFromPosition:selectionStart toPosition:selectionEnd];
return NSMakeRange(location, length);
}
- (void)setSelectedRange:(NSRange)range {
UITextPosition *beginning = self.beginningOfDocument;
UITextPosition *startPosition = [self positionFromPosition:beginning offset:range.location];
UITextPosition *endPosition = [self positionFromPosition:beginning offset:range.location + range.length];
UITextRange *selectionRange = [self textRangeFromPosition:startPosition toPosition:endPosition];
[self setSelectedTextRange:selectionRange];
}
@end
//每組個數
static NSInteger const kGroupSize = 4;
#pragma mark - UITextFieldDelegate
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
if (textField == self.bankCardNoField) {
NSString *text = textField.text;
NSString *beingString = [textField.text stringByReplacingCharactersInRange:range withString:string];
NSString *cardNo = [self removingSapceString:beingString];
//校驗卡号隻能是數字,且不能超過20位
if ( (string.length != 0 && ![self isValidNumbers:cardNo]) || cardNo.length > 20) {
return NO;
}
//擷取【光标右側的數字個數】
NSInteger rightNumberCount = [self removingSapceString:[text substringFromIndex:textField.selectedRange.location + textField.selectedRange.length]].length;
//輸入長度大于4 需要對數字進行分組,每4個一組,用空格隔開
if (beingString.length > kGroupSize) {
textField.text = [self groupedString:beingString];
} else {
textField.text = beingString;
}
text = textField.text;
/**
* 計算光标位置(相對末尾)
* 光标右側空格數 = 所有的空格數 - 光标左側的空格數
* 光标位置 = 【光标右側的數字個數】+ 光标右側空格數
*/
NSInteger rightOffset = [self rightOffsetWithCardNoLength:cardNo.length rightNumberCount:rightNumberCount];
NSRange currentSelectedRange = NSMakeRange(text.length - rightOffset, 0);
//如果光标左側是一個空格,則光标回退一格
if (currentSelectedRange.location > 0 && [[text substringWithRange:NSMakeRange(currentSelectedRange.location - 1, 1)] isEqualToString:@" "]) {
currentSelectedRange.location -= 1;
}
[textField setSelectedRange:currentSelectedRange];
return NO;
}
return YES;
}
#pragma mark - Helper
/**
* 計算光标相對末尾的位置偏移
*
* @param length 卡号的長度(不包括空格)
* @param rightNumberCount 光标右側的數字個數
*
* @return 光标相對末尾的位置偏移
*/
- (NSInteger)rightOffsetWithCardNoLength:(NSInteger)length rightNumberCount:(NSInteger)rightNumberCount {
NSInteger totalGroupCount = [self groupCountWithLength:length];
NSInteger leftGroupCount = [self groupCountWithLength:length - rightNumberCount];
NSInteger totalWhiteSpace = totalGroupCount -1 > 0? totalGroupCount - 1 : 0;
NSInteger leftWhiteSpace = leftGroupCount -1 > 0? leftGroupCount - 1 : 0;
return rightNumberCount + (totalWhiteSpace - leftWhiteSpace);
}
/**
* 校驗給定字元串是否是純數字
*
* @param numberStr 字元串
*
* @return 字元串是否是純數字
*/
- (BOOL)isValidNumbers:(NSString *)numberStr {
NSString* numberRegex = @"^[0-9]+$";
NSPredicate *numberPre = [NSPredicate predicateWithFormat:@"SELF MATCHES %@",numberRegex];
return [numberPre evaluateWithObject:numberStr];
}
/**
* 去除字元串中包含的空格
*
* @param str 字元串
*
* @return 去除空格後的字元串
*/
- (NSString *)removingSapceString:(NSString *)str {
return [str stringByReplacingOccurrencesOfString:@" " withString:@"" options:NSCaseInsensitiveSearch range:NSMakeRange(0, str.length)];
}
/**
* 根據長度計算分組的個數
*
* @param length 長度
*
* @return 分組的個數
*/
- (NSInteger)groupCountWithLength:(NSInteger)length {
return (NSInteger)ceilf((CGFloat)length /kGroupSize);
}
/**
* 給定字元串根據指定的個數進行分組,每一組用空格分隔
*
* @param string 字元串
*
* @return 分組後的字元串
*/
- (NSString *)groupedString:(NSString *)string {
NSString *str = [self removingSapceString:string];
NSInteger groupCount = [self groupCountWithLength:str.length];
NSMutableArray *components = [[NSMutableArray alloc] init];
for (NSInteger i = 0; i < groupCount; i++) {
if (i*kGroupSize + kGroupSize > str.length) {
[components addObject:[str substringFromIndex:i*kGroupSize]];
} else {
[components addObject:[str substringWithRange:NSMakeRange(i*kGroupSize, kGroupSize)]];
}
}
NSString *groupedString = [components componentsJoinedByString:@" "];
return groupedString;
}
銀行卡輸入Demo: https://github.com/Nomeqc/BankCardInputFieldDemo