支付宝、微信添加银行卡号输入框格式限制之任意位置回删比较
最近工作中遇到一个问题，就是一个输入银行卡号的输入框，如下图，微信的处理是光标放在空格后面不能删除，并且点击删除后自动回退到文本最后，还有就是每删除一个数字光标也自动回退到最后；而支付宝的处理则是，光标无论放在任何位置都能删除，并且不回退到最后。我们暂不去评判谁的用户体验好，作为开发人员，先看看两种怎么实现吧。上代码吧。
银行卡号输入框.png
微信的做法：
-(BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{
if(textField == self.text_cardno) {
NSString *text = [self.text_cardno text];
NSCharacterSet *characterSet = [NSCharacterSet characterSetWithCharactersInString:@"0123456789\b"];
string = [string stringByReplacingOccurrencesOfString:@" "withString:@""];
if([string rangeOfCharacterFromSet:[characterSet invertedSet]].location != NSNotFound) {
returnNO;
}
text = [text stringByReplacingCharactersInRange:range withString:string];
text = [text stringByReplacingOccurrencesOfString:@" "withString:@""];
NSString *newString = @"";
while(text.length > 0) {
NSString *subString = [text substringToIndex:MIN(text.length, 4)];
newString = [newString stringByAppendingString:subString];
if(subString.length == 4) {
newString = [newString stringByAppendingString:@" "];
}
text = [text substringFromIndex:MIN(text.length, 4)];
}
newString = [newString stringByTrimmingCharactersInSet:[characterSet invertedSet]];
// 限制长度
if(newString.length >= 24) {
returnNO;
}
[self.text_cardno setText:newString];
returnNO;
}
returnYES;
}
// 银行卡号转正常号 － 去除4位间的空格
-(NSString *)bankNumToNormalNum
{
return[self.text_cardno.text stringByReplacingOccurrencesOfString:@" "withString:@""];
}
支付宝的做法：
//每组个数
staticNSIntegerconstkGroupSize =4;
- (BOOL)textField:(UITextField*)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString*)string {
if(textField ==self.beforPhoneNumTextField) {
if(range.location>=11)
returnNO;// return NO to not change text
returnYES;
}elseif(textField ==self.verfiCodeTextField){
if(range.location>=6)
returnNO;// return NO to not change text
returnYES;
}elseif(textField ==self.bankCardNumTextField) {
NSString*text = textField.text;
NSString*beingString = [textField.textstringByReplacingCharactersInRange:rangewithString:string];
NSString*cardNo = [selfremovingSapceString:beingString];
//校验卡号只能是数字，且不能超过20位
if( (string.length!=0&& ![selfisValidNumbers:cardNo]) || cardNo.length>20) {
returnNO;
}
//获取【光标右侧的数字个数】
NSIntegerrightNumberCount = [selfremovingSapceString:[textsubstringFromIndex:textField.selectedRange.location+ textField.selectedRange.length]].length;
//输入长度大于4 需要对数字进行分组，每4个一组，用空格隔开
if(beingString.length>kGroupSize) {
textField.text= [selfgroupedString:beingString];
}else{
textField.text= beingString;
}
text = textField.text;
/**
* 计算光标位置(相对末尾)
* 光标右侧空格数 = 所有的空格数 - 光标左侧的空格数
* 光标位置 = 【光标右侧的数字个数】+ 光标右侧空格数
*/
NSIntegerrightOffset = [selfrightOffsetWithCardNoLength:cardNo.lengthrightNumberCount:rightNumberCount];
NSRangecurrentSelectedRange =NSMakeRange(text.length- rightOffset,0);
//如果光标左侧是一个空格，则光标回退一格
if(currentSelectedRange.location>0&& [[textsubstringWithRange:NSMakeRange(currentSelectedRange.location-1,1)]isEqualToString:@" "]) {
currentSelectedRange.location-=1;
}
[textField setSelectedRange:currentSelectedRange];
returnNO;
}
returnYES;
}
/**
*计算光标相对末尾的位置偏移
*
*@param length卡号的长度(不包括空格)
*@param rightNumberCount 光标右侧的数字个数
*
*@return 光标相对末尾的位置偏移
*/
- (NSInteger)rightOffsetWithCardNoLength:(NSInteger)length rightNumberCount:(NSInteger)rightNumberCount {
NSIntegertotalGroupCount = [selfgroupCountWithLength:length];
NSIntegerleftGroupCount = [selfgroupCountWithLength:length - rightNumberCount];
NSIntegertotalWhiteSpace = totalGroupCount -1>0? totalGroupCount -1:0;
NSIntegerleftWhiteSpace = leftGroupCount -1>0? leftGroupCount -1:0;
returnrightNumberCount + (totalWhiteSpace - leftWhiteSpace);
}
/**
*校验给定字符串是否是纯数字
*
*@param numberStr 字符串
*
*@return 字符串是否是纯数字
*/
- (BOOL)isValidNumbers:(NSString*)numberStr {
NSString* numberRegex =@"^[0-9]+$";
NSPredicate*numberPre = [NSPredicatepredicateWithFormat:@"SELF MATCHES %@",numberRegex];
return[numberPreevaluateWithObject:numberStr];
}
/**
*去除字符串中包含的空格
*
*@param str 字符串
*
*@return 去除空格后的字符串
*/
- (NSString*)removingSapceString:(NSString*)str {
return[strstringByReplacingOccurrencesOfString:@" "withString:@""options:NSCaseInsensitiveSearchrange: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 = [selfremovingSapceString:string];
NSIntegergroupCount = [selfgroupCountWithLength:str.length];
NSMutableArray*components = [[NSMutableArrayalloc]init];
for(NSIntegeri =0; i < groupCount; i++) {
if(i*kGroupSize+kGroupSize> str.length) {
[componentsaddObject:[strsubstringFromIndex:i*kGroupSize]];
}else{
[componentsaddObject:[strsubstringWithRange:NSMakeRange(i*kGroupSize,kGroupSize)]];
}
}
NSString*groupedString = [componentscomponentsJoinedByString:@" "];
returngroupedString;
}
网友评论