1.輸入框的實現分析
主要由可見的6個方格仔組成，這裡可以看成6個輸入框或者顯示標籤。輸入6個數字，組成密碼或者驗證碼，可以建立6個textfield拼接，也可以用6個label去顯示，具體做法都可以，主要是實現的邏輯。
首先使用者在來到輸入頁面的時候，鍵盤一般是彈起的，所以得有個textfiled作為焦點彈起鍵盤，接收輸入事件，這裡我選用的是用6個label去顯示，不用6個textfiled的原因是，要不斷去判斷是哪個textfiled獲取的焦點，很麻煩，而用label只需判斷有沒有內容顯示就可以了。每次輸入完畢之後，將label的text設定為輸入的內容，同時將textfiled的輸入內容清空，同時記錄輸入的數字，這樣保證每次輸入都沒有殘留上次的輸入內容，保證輸入的唯一，方格站位滿了之後就將輸入的內容拼接起來，限制字串的長度，這樣就得到了想要的數字驗證碼或者密碼。
2.核心布局
我用的是masonry自動布局，比較方便，不用重複修改frame。主要就是線條及label的布局，控制好每個label的寬度，其餘自適應就好，其餘線條則根據每個label的left去修改即可。
3.主要邏輯**
乙個是輸入的情況，另乙個是刪除的情況，需要分開判斷。這裡我只是簡單粗暴的實現了6位密碼的情況，其他情況的小夥伴可自行設定或者進行優化。
- (void)textdidchanged:(uitextfield *)textfield
}if (textfield.text.length == 6) else
}else
break;}}
}if (_codestring.length < 6) else
}textfield.text = nil;
if (_codestring.length == 6 && _codestring != nil)
[[nsnotificationcenter defaultcenter] postnotificationname:codedidinputcompeletnotification object:_codestring];
}nslog(@"%@",_codestring);
}
- (void)deletebackward
}break;}}
nslog(@"%@",_codestring);
}
4.總結及效果展示
總的來說，我這裡只是實現了輸入框的基本用法及邏輯，其餘拓展的還有很多，比如輸入錯誤顏色變化，輸入框抖動等，其實具體分析一下很簡單就做出來了。
iOS開發 圓形驗證碼 或密碼 輸入框的封裝
專案中用到了圓形驗證碼輸入框，輸入框之間要求有一定的距離，ui圖如下 剛開始想著用固定的幾個 uitextfield 實現，但轉念一想，用 uitextfield 實現有點麻煩 輸入框多的話，它們之間的響應事件不太容易控制，需要來回變換 於是開始想其它辦法，最後用了以下的思路 封裝的圓形輸入框主要實...
js vue實現6位驗證碼輸入框效果
說明因業務需求需要有個6框連續輸入的元件，這邊是直接畫了6個輸入框，然後通過一些事件控制輸入框的輸入順序，以及一些特殊處理。效果 元件原始碼 v for item,index in captchas key index v model item.num id captcha index input ...
仿微信 支付寶等簡潔的驗證碼 密碼輸入框。
liuguangli verificationcodeinput 更多 作者 提 bug 示例 apk 標籤 驗證碼 輸入框 verification 簡潔驗證碼輸入框，能自定義輸入框個數和樣式。監聽輸入完成 verificationcodeinput input verificationcodei...