iOS 輸入框攔截器:FJFTextInputIntercepter

一. 前言

我們在項目開發(fā)中很經(jīng)常會碰到各種對輸入框的限制需求评腺，比如姓名最多只能10字符切蟋，密碼最多只能16個字符忱辅，金額最多9位數(shù)且小數(shù)點只能保留兩位小數(shù)焰宣，且不能包含表情霉囚，更有甚者，可能會要求姓名匕积，中文最多6個字符盈罐，英文最多12個字符。面對著各種錯綜復雜輸入限制以及不同種類的第三方鍵盤闪唆，處理起來很經(jīng)常需要寫一定量的代碼盅粪，且處理邏輯相對復雜∏睦伲基于這樣的情況票顾，于是編寫了這樣一個輸入框攔截器:FJFTextInputIntercepter。

FJFTextInputIntercepter攔截器的作用就類似于你請的家政服務帆调，原本你需要自己來打掃家里奠骄，但是現(xiàn)在你只需把你的需求告訴家政人員，他們會按照你的需求來進行打掃贷帮，最后將打掃結(jié)果告知你戚揭。輸入框攔截器就類似這樣的效果，你只需告訴它輸入的限制條件撵枢，然后他就會將依據(jù)你的限制條件進行處理民晒，并將處理結(jié)果回調(diào)給你。

這個輸入框攔截器:FJFTextInputIntercepter使用簡單锄禽，只需設置限制條件潜必，然后傳入需要限制的輸入框，其他的就交給攔截器進行處理沃但。

二.使用介紹

  • 使用方法
/**
 設置 需要 攔截的輸入框

 @param textInputView 輸入框
 */
- (void)textInputView:(UIView *)textInputView;


/**
 設置 攔截器和攔截的輸入框

 @param textInputView 輸入框
 @param intercepter 攔截器
 */
+ (void)textInputView:(UIView *)textInputView setInputIntercepter:(FJFTextInputIntercepter *)intercepter;

/**
 生成 輸入框 攔截器

 @param textInputView 需要限制的輸入框
 @param beyoudLimitBlock 超過限制 回調(diào)
 @return 生成 輸入框 攔截器
 */
+ (FJFTextInputIntercepter *)textInputView:(UIView *)textInputView beyoudLimitBlock:(FJFTextInputIntercepterBlock)beyoudLimitBlock;

舉個例子:
金額輸入限制:最多9位數(shù)磁滚，最多保留2位小數(shù)。

// moneyTextFieldView
- (FJTextFieldView *)moneyTextFieldView {
    if (!_moneyTextFieldView) {
        _moneyTextFieldView = [[FJTextFieldView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(self.cardTextFieldView.frame) + 20, [UIScreen mainScreen].bounds.size.width - 80 - 20, 44)];
        _moneyTextFieldView.tipLabel.text = @"金額:";
        _moneyTextFieldView.textField.placeholder = @"請輸入金額(最多9位數(shù)宵晚，保留2位小數(shù))";
        FJFTextInputIntercepter *intercepter = [[FJFTextInputIntercepter alloc] init];
        // 最多輸入9位數(shù)
        intercepter.maxCharacterNum = 9;
        // 保留兩位小數(shù)
        intercepter.decimalPlaces = 2;
        // 分數(shù)類型
        intercepter.intercepterNumberType = FJFTextInputIntercepterNumberTypeDecimal;
        intercepter.beyoudLimitBlock = ^(FJFTextInputIntercepter *textInputIntercepter, NSString *string) {
            NSLog(@"最多只能輸入9位數(shù)字");
        };
        [intercepter textInputView:_moneyTextFieldView.textField];
    }
    return  _moneyTextFieldView;
}

如上我們可以看到:

我們生成了一個FJFTextInputIntercepter攔截器實例垂攘，然后給實例的屬性分別添加限制要求，最后將限制的輸入框傳入攔截器淤刃，表示對此輸入框依據(jù)限制要求進行輸入攔截晒他。

  • 集成方法:
靜態(tài)：手動將FJFTextInputIntercepter文件夾拖入到工程中。
動態(tài)：CocoaPods：pod 'FJFTextInputIntercepter'
  • github 鏈接

Demo地址: https://github.com/fangjinfeng/FJFTextInputIntercepter

  • 效果展示:
    FJFTextInputIntercepter.gif

三. 原理分析

1. 原理簡介

FJFTextInputIntercepter只有一種調(diào)用方法就是:

  • 首先生成攔截器實例:
FJFTextInputIntercepter *intercepter = [[FJFTextInputIntercepter alloc] init];
  • 然后給攔截器實例相關屬性設置限制要求:
intercepter.maxCharacterNum = 10;
intercepter.emojiAdmitted = NO;
intercepter.doubleBytePerChineseCharacter = NO;
intercepter.beyoudLimitBlock = ^(FJFTextInputIntercepter *textInputIntercepter, NSString *string) {
    NSLog(@"最多只能輸入漢字5個字逸贾，英文10個字母");
 };
  • 最后設置攔截對象即需要進行輸入限制的輸入框:
[intercepter textInputView:_nameTextFieldView.textField];

2. 代碼分析:

屬性分析:

// maxCharacterNum 限制 最大 字符
@property (nonatomic, assign) NSUInteger maxCharacterNum;

// decimalPlaces 小數(shù) 位數(shù)
// (當intercepterNumberType 為FJFTextInputIntercepterNumberTypeDecimal 有用)
@property (nonatomic, assign) NSUInteger decimalPlaces;

// beyoudLimitBlock 超過限制 最大 字符數(shù) 回調(diào)
@property (nonatomic, copy) FJFTextInputIntercepterBlock beyoudLimitBlock;

// emojiAdmitted 是否 允許 輸入 表情
@property (nonatomic, assign, getter=isEmojiAdmitted)   BOOL emojiAdmitted;

// intercepterNumberType 數(shù)字 類型
// FJFTextInputIntercepterNumberTypeNone 默認
// FJFTextInputIntercepterNumberTypeNumberOnly 只允許 輸入 數(shù)字陨仅，emojiAdmitted津滞，decimalPlaces 不起作用
// FJFTextInputIntercepterNumberTypeDecimal 分數(shù) emojiAdmitted 不起作用 decimalPlaces 小數(shù) 位數(shù)
@property (nonatomic, assign) FJFTextInputIntercepterNumberType  intercepterNumberType;

/**
  doubleBytePerChineseCharacter 為 NO
 字母、數(shù)字灼伤、漢字都是1個字節(jié) 表情是兩個字節(jié)
 doubleBytePerChineseCharacter 為 YES
 不允許 輸入表情 一個漢字是否代表兩個字節(jié) default YES
 允許 輸入表情 一個漢字代表3個字節(jié) 表情 代表 4個字節(jié)
 */
@property (nonatomic, assign, getter=isDoubleBytePerChineseCharacter) BOOL doubleBytePerChineseCharacter;

屬性功能如注釋所示触徐，攔截器默認設置如下屬性:

 _emojiAdmitted = NO;
_maxCharacterNum = UINT_MAX;
_doubleBytePerChineseCharacter = NO;
_intercepterNumberType = FJFTextInputIntercepterNumberTypeNone;

默認不允許輸入表情、不限制最大輸入字符數(shù)狐赡、漢字和字符同樣一個字節(jié)撞鹉、表情兩個字節(jié)、不設置數(shù)字類型猾警。

限制邏輯分析:

  • A. 調(diào)用公共方法: 
#pragma mark -------------------------- Public  Methods

- (void)textInputView:(UIView *)textInputView {
    [FJFTextInputIntercepter textInputView:textInputView setInputIntercepter:self];
}


+ (FJFTextInputIntercepter *)textInputView:(UIView *)textInputView beyoudLimitBlock:(FJFTextInputIntercepterBlock)beyoudLimitBlock {
    FJFTextInputIntercepter *tmpInputIntercepter = [[FJFTextInputIntercepter alloc] init];
    tmpInputIntercepter.beyoudLimitBlock = [beyoudLimitBlock copy];
    [self textInputView:textInputView setInputIntercepter:tmpInputIntercepter];
    return tmpInputIntercepter;
    
}


+ (void)textInputView:(UIView *)textInputView setInputIntercepter:(FJFTextInputIntercepter *)intercepter {
    
    if ([textInputView isKindOfClass:[UITextField class]]) {
        UITextField *textField = (UITextField *)textInputView;
       
        textField.yb_textInputIntercepter = intercepter;
        [[NSNotificationCenter defaultCenter] addObserver:intercepter
                                                 selector:@selector(textInputDidChangeWithNotification:)
                                                     name:UITextFieldTextDidChangeNotification
                                                   object:textInputView];
        
    } else if ([textInputView isKindOfClass:[UITextView class]]) {
        UITextView *textView = (UITextView *)textInputView;
        textView.yb_textInputIntercepter = intercepter;
        [[NSNotificationCenter defaultCenter] addObserver:intercepter
                                                 selector:@selector(textInputDidChangeWithNotification:)
                                                     name:UITextViewTextDidChangeNotification
                                                   object:textInputView];
    }
}

從代碼中我們可以看出最后都會走:

+ (void)textInputView:(UIView *)textInputView setInputIntercepter:(FJFTextInputIntercepter *)intercepter

類方法孔祸，這里對輸入框類型進行了判斷，并設置將攔截器和輸入框關聯(lián)在一起发皿，保證攔截器的生命周期和輸入框一致，同時注冊了文本改變的通知拂蝎。

  • B. 文本改變通知: 
#pragma mark -------------------------- Noti  Methods
- (void)textInputDidChangeWithNotification:(NSNotification *)noti {
    if (![((UIView *)noti.object) isFirstResponder]) {
        return;
    }
    
    BOOL textFieldTextDidChange = [noti.name isEqualToString:UITextFieldTextDidChangeNotification] &&
    [noti.object isKindOfClass:[UITextField class]];
    BOOL textViewTextDidChange = [noti.name isEqualToString:UITextViewTextDidChangeNotification] &&
    [noti.object isKindOfClass:[UITextView class]];
    if (!textFieldTextDidChange && !textViewTextDidChange) {
        return;
    }
    
    if ([noti.name isEqualToString:UITextFieldTextDidChangeNotification]) {
        [self textFieldTextDidChangeWithNotification:noti];
    } else if ([noti.name isEqualToString:UITextViewTextDidChangeNotification]) {
        [self textViewTextDidChangeWithNotification:noti];
    }
}

該函數(shù)主要對是否為當前第一響應者和通知名稱是否匹配進行判斷穴墅，然后調(diào)用輸入框類型對應的通知處理方法。

  • C. 輸入框類型通知處理方法:
#pragma mark -------------------------- Private  Methods

- (void)textFieldTextDidChangeWithNotification:(NSNotification *)noti {
    
    UITextField *textField = (UITextField *)noti.object;
    NSString *inputText = textField.text;
    NSString *primaryLanguage = [textField.textInputMode primaryLanguage];
    //獲取高亮部分
    UITextRange *selectedRange = [textField markedTextRange];
    UITextPosition *textPosition = [textField positionFromPosition:selectedRange.start
                                                            offset:0];
    
    inputText = [self handleWithInputText:inputText];

    NSString *finalText = [self finalTextAfterProcessingWithInput:inputText
                                                  maxCharacterNum:self.maxCharacterNum
                                                  primaryLanguage:primaryLanguage
                                                     textPosition:textPosition
                                  isDoubleBytePerChineseCharacter:self.isDoubleBytePerChineseCharacter];
    if (finalText.length > 0) {
        textField.text = finalText;
    }
    else if(self.intercepterNumberType == FJFTextInputIntercepterNumberTypeNumberOnly ||
            self.intercepterNumberType == FJFTextInputIntercepterNumberTypeDecimal ||
            self.isEmojiAdmitted == NO){
        textField.text = inputText;
    }
     _previousText = textField.text;
}

- (void)textViewTextDidChangeWithNotification:(NSNotification *)noti {
    
    UITextView *textView = (UITextView *)noti.object;
    NSString *inputText = textView.text;
    NSString *primaryLanguage = [textView.textInputMode primaryLanguage];
    //獲取高亮部分
    UITextRange *selectedRange = [textView markedTextRange];
    UITextPosition *textPosition = [textView positionFromPosition:selectedRange.start
                                                           offset:0];
    
    inputText = [self handleWithInputText:inputText];
    
    NSString *finalText = [self finalTextAfterProcessingWithInput:inputText
                                                  maxCharacterNum:self.maxCharacterNum
                                                  primaryLanguage:primaryLanguage
                                                     textPosition:textPosition
                                  isDoubleBytePerChineseCharacter:self.isDoubleBytePerChineseCharacter];
    
    if (finalText.length > 0) {
        textView.text = finalText;
    }

    _previousText = textView.text;
}

通知處理方法內(nèi)部分別獲取當前語言類型温自、和高亮部分玄货，然后調(diào)用輸入文本的處理方法:handleWithInputText和最大輸入字符的截取方法:finalTextAfterProcessingWithInput。

  • D. 在輸入文本的處理方法:handleWithInputText中分別對只能輸入數(shù)字悼泌、輸入分數(shù)和是否允許輸入表情進行處理.
// 處理 輸入 字符串
- (NSString *)handleWithInputText:(NSString *)inputText {
    if (_previousText.length >= inputText.length) {
        return inputText;
    }
    
    NSString *tmpReplacementString = [inputText substringWithRange:NSMakeRange(_previousText.length, (inputText.length - _previousText.length))];
    // 只允許 輸入 數(shù)字
    if (self.intercepterNumberType == FJFTextInputIntercepterNumberTypeNumberOnly) {
        if ([tmpReplacementString fjf_isCertainStringType:FJFTextInputStringTypeNumber] == NO) {
            inputText = _previousText;
        }
    }
    // 輸入 小數(shù)
    else if(self.intercepterNumberType == FJFTextInputIntercepterNumberTypeDecimal){
        NSRange tmpRange = NSMakeRange(_previousText.length, 0);
        BOOL isCorrect = [self inputText:_previousText shouldChangeCharactersInRange:tmpRange replacementString:tmpReplacementString];
        if (isCorrect == YES) {
            if (inputText.length == self.maxCharacterNum && [tmpReplacementString isEqualToString:@"."]) {
                 inputText = _previousText;
            }
        }
        else {
            inputText = _previousText;
        }
    }
    // 不允許 輸入 表情
    else if (!self.isEmojiAdmitted && [tmpReplacementString fjf_isSpecialLetter]) {
        inputText =  _previousText;
    }
    
    return inputText;
}
  • F. 在finalTextAfterProcessingWithInput函數(shù)中依據(jù)是否為中文輸入法來分別進行處理
// 核心代碼
- (NSString *)finalTextAfterProcessingWithInput:(NSString *)inputText
                                maxCharacterNum:(NSUInteger)maxCharacterNum
                                primaryLanguage:(NSString *)primaryLanguage
                                   textPosition:(UITextPosition *)textPosition
                isDoubleBytePerChineseCharacter:(BOOL)isDoubleBytePerChineseCharacter {
    
   

    NSString *finalText = nil;
    if ([primaryLanguage isEqualToString:@"zh-Hans"] ||
        [primaryLanguage isEqualToString:@"zh-Hant"]) { // 簡繁體中文輸入
        // 沒有高亮選擇的字松捉，則對已輸入的文字進行字數(shù)統(tǒng)計和限制
        if (!textPosition) {
            finalText = [self processingTextWithInput:inputText
                                      maxCharacterNum:maxCharacterNum
                      isDoubleBytePerChineseCharacter:isDoubleBytePerChineseCharacter];
        }
        
    } else { // 中文輸入法以外的直接對其統(tǒng)計限制即可，不考慮其他語種情況
        finalText = [self processingTextWithInput:inputText
                                  maxCharacterNum:maxCharacterNum
                  isDoubleBytePerChineseCharacter:isDoubleBytePerChineseCharacter];
    }
    
    return finalText;
}

這段代碼里面判斷了是否為簡繁體中文輸入馆里，如果不是簡繁體中文輸入隘世，直接調(diào)用processingTextWithInput方法對已輸入的文字進行字數(shù)和統(tǒng)計的限制，如果是簡繁體中文輸入鸠踪，判斷是否為高亮選擇的字丙者，如果不是高亮選擇的字，對已輸入的文字進行字數(shù)和統(tǒng)計的限制营密。

  • G. processingTextWithInput 依據(jù)是否一個漢字對應兩個字節(jié)來分別進行處理
- (NSString *)processingTextWithInput:(NSString *)inputText
                      maxCharacterNum:(NSUInteger)maxCharacterNum
      isDoubleBytePerChineseCharacter:(BOOL)isDoubleBytePerChineseCharacter {
    
    NSString *processingText = nil;
    
    if (isDoubleBytePerChineseCharacter) { //如果一個漢字是雙字節(jié)
        processingText = [self doubleBytePerChineseCharacterSubString:inputText
                                                      maxCharacterNum:maxCharacterNum];
    } else {
        if (inputText.length > maxCharacterNum) {
            NSRange rangeIndex = [inputText rangeOfComposedCharacterSequenceAtIndex:maxCharacterNum];
            if (rangeIndex.length == 1) {
                processingText = [inputText substringToIndex:maxCharacterNum];
            } else {
                NSRange rangeRange = [inputText rangeOfComposedCharacterSequencesForRange:NSMakeRange(0, maxCharacterNum)];
                processingText = [inputText substringWithRange:rangeRange];
            }
            if (self.beyoudLimitBlock) {
                self.beyoudLimitBlock(self, processingText);
            }
        }
    }
    return processingText;
}

該函數(shù)判斷如果一個漢字是雙字節(jié)械媒，就調(diào)用doubleBytePerChineseCharacterSubString依據(jù)是否允許輸入表情，調(diào)用不同的編碼方式進行處理评汰。如果一個漢字是一個字節(jié)纷捞，直接進行最大字符截取。

四. 總結(jié)

綜上所述就是FJFTextInputIntercepter這個輸入框的一個設計思路被去，核心代碼量差不多400行左右主儡，能應對大部分的輸入框要求`，使用簡單编振。

image.png

如果你覺得你覺得這思路或是代碼有什么問題缀辩，歡迎留言大家討論下臭埋！如果覺得不錯，麻煩給個喜歡或star,謝謝臀玄！

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末瓢阴，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子健无，更是在濱河造成了極大的恐慌荣恐，老刑警劉巖，帶你破解...
    沈念sama閱讀 210,914評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件累贤，死亡現(xiàn)場離奇詭異叠穆，居然都是意外死亡，警方通過查閱死者的電腦和手機臼膏，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2贊 383
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門硼被，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人渗磅，你說我怎么就攤上這事嚷硫。” “怎么了始鱼？”我有些...
    開封第一講書人閱讀 156,531評論 0贊 345
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵仔掸，是天一觀的道長。 經(jīng)常有香客問我医清，道長起暮，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,309評論 1贊 282
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任会烙，我火速辦了婚禮负懦，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘持搜。我一直安慰自己密似，他們只是感情好，可當我...
    茶點故事閱讀 65,381評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布葫盼。 她就那樣靜靜地躺著残腌，像睡著了一般。 火紅的嫁衣襯著肌膚如雪贫导。 梳的紋絲不亂的頭發(fā)上抛猫，一...
    開封第一講書人閱讀 49,730評論 1贊 289
  • 城市分裂傳說
    那天，我揣著相機與錄音孩灯，去河邊找鬼闺金。 笑死，一個胖子當著我的面吹牛峰档，可吹牛的內(nèi)容都是我干的败匹。 我是一名探鬼主播寨昙，決...
    沈念sama閱讀 38,882評論 3贊 404
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼掀亩！你這毒婦竟也來了舔哪？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 37,643評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤槽棍，失蹤者是張志新（化名）和其女友劉穎捉蚤，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體炼七，經(jīng)...
    沈念sama閱讀 44,095評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡缆巧，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了豌拙。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陕悬。...
    茶點故事閱讀 38,566評論 1贊 339
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖姆蘸，靈堂內(nèi)的尸體忽然破棺而出墩莫，到底是詐尸還是另有隱情，我是刑警寧澤逞敷，帶...
    沈念sama閱讀 34,253評論 4贊 328
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站灌侣，受9級特大地震影響推捐，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜侧啼，卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一牛柒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧痊乾，春花似錦皮壁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0贊 21
  • 一樁弒父案蛾魄，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至湿滓，卻和暖如春滴须，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背叽奥。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1贊 264
  • 情欲美人皮
    我被黑心中介騙來泰國打工扔水， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人朝氓。 一個月前我還...
    沈念sama閱讀 46,248評論 2贊 360
  • 代替公主和親
    正文 我出身青樓魔市，卻偏偏與公主長得像主届，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子待德，可洞房花燭夜當晚...
    茶點故事閱讀 43,440評論 2贊 348