Swift : 用于卡详细信息的 UITextField 的加密输入

Question

我想接受Card details as input from user。条件是 first 10 character will be hidden where as user will be allowed to enter next 6 character.

我为此使用了 四个文本字段（我的假设）。欢迎任何其他建议。

问题 1。 如何让用户直接从第 3 个文本字段的第 11 个字符开始输入？

对于到期日期字段，我使用了两个文本字段。

Q.2。 如何使文本字段只有底部边框（没有左、右和上边框）？

Answer 1

问题 1。如何让用户直接从第 3 个文本字段的第 11 个字符开始输入？

A-1 : txt3.becomeFirstResponder()

问题 2。如何让文本框只有底部边框（没有左、右、上边框）？

A-2：使用下面的代码行：

 func addbottomBorderWithColor(view : UIView, color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.CGColor
        border.frame = CGRectMake(15.0, view.frame.size.height-width, view.frame.size.width,width )
        view.layer.addSublayer(border)
    }

Answer 2

我已经使用以下方法解决了这个问题：

四个文本字段，第一个和第二个是只读的。在第三个文本字段中，我放置了带有两个加密值（即 XX）的标签，第三个文本字段仅接受两位数字。第四个文本字段接受四位数字。

注意： 我使用了这种标签和文本字段方法，因为我已经从 DB 或其他来源获得了 credit/debit 卡号（14 位）。我只需要接受用户的最后 6 位数字并与现有值进行比较。

当用户在第三个文本字段中输入两位数字时，它会自动跳转到第四个文本字段。此后，当用户在第 4 个文本字段中输入四位数字时，它会自动跳转到到期月份文本字段，然后是到期年份。
setBorderColor 函数仅将底部边框颜色设置为到期月份和年份文本字段。
我已将 UIToolbar with done button 添加到所有文本字段的数字键盘（在设计时设置）。

下面是我用过的代码：

@IBOutlet weak var txtCardDetails1: UITextField!

    @IBOutlet weak var txtCardDetails2: UITextField!
    @IBOutlet weak var txtCardDetails3: UITextField!
    @IBOutlet weak var txtCardDetails4: UITextField!

    @IBOutlet weak var txtExpiryMonth: UITextField!
    @IBOutlet weak var txtExpiryYear: UITextField!

    let objBlackColor = UIColor.blackColor()
    let objGreyColor = UIColor.grayColor()

覆盖 func viewDidLoad() { super.viewDidLoad()

        //Add done button to numeric pad keyboard
        let toolbarDone = UIToolbar.init()
        toolbarDone.sizeToFit()
        let barBtnDone = UIBarButtonItem.init(barButtonSystemItem: UIBarButtonSystemItem.Done,
                                              target: self, action: #selector(VerifyCardViewController.doneButton_Clicked(_:)))

        toolbarDone.items = [barBtnDone] // You can even add cancel button too
        txtCardDetails3.inputAccessoryView = toolbarDone
        txtCardDetails4.inputAccessoryView = toolbarDone
        txtExpiryMonth.inputAccessoryView = toolbarDone
        txtExpiryYear.inputAccessoryView = toolbarDone

        // Set an action on EditingChanged event of textfield
        txtCardDetails3.addTarget(self, action: #selector(VerifyCardViewController.textFieldDidChange(_:)), forControlEvents: UIControlEvents.EditingChanged)

        txtCardDetails4.addTarget(self, action: #selector(VerifyCardViewController.textFieldDidChange(_:)), forControlEvents: UIControlEvents.EditingChanged)

        txtExpiryMonth.addTarget(self, action: #selector(VerifyCardViewController.textFieldDidChange(_:)), forControlEvents: UIControlEvents.EditingChanged)

        setBorderColor(txtExpiryMonth,setBorderColor: objGreyColor)
        setBorderColor(txtExpiryYear,setBorderColor: objGreyColor)
    }


 //Set bottom border color to textfield 
    func setBorderColor(objTextField : UITextField, setBorderColor objColor:UIColor) {
        let bottomLine = CALayer()
        bottomLine.frame = CGRectMake(0.0, objTextField.frame.height - 1, objTextField.frame.width, 1.0)
        bottomLine.backgroundColor = objColor.CGColor

        objTextField.borderStyle = UITextBorderStyle.None
        objTextField.layer.addSublayer(bottomLine)
    }

    func doneButton_Clicked(sender: AnyObject) { // Hide keyboard when done button is clicked
        txtCardDetails3.resignFirstResponder()
        txtCardDetails4.resignFirstResponder()
        txtExpiryMonth.resignFirstResponder()
        txtExpiryYear.resignFirstResponder()
    }

  func textFieldDidChange(textField: UITextField){ // Change text focus as per condition

        let text = textField.text

        if textField.tag == 101 { // Set tag to textfield (if multiple) during design time
            if text?.utf16.count==2 {
                txtCardDetails4.becomeFirstResponder() // Move to next text field
            }
        }
        else if textField.tag == 102 {
            if text?.utf16.count==4 {
                txtExpiryMonth.becomeFirstResponder()
            }
        }
        else if textField.tag == 103 {
            if text?.utf16.count==2 {
                txtExpiryYear.becomeFirstResponder()
            }
        }
    }

    func textFieldDidBeginEditing(textField: UITextField) {

        if textField.tag == 103 { // Set border color based on focus
           setBorderColor(txtExpiryMonth,setBorderColor: objBlackColor)
        }
        else if textField.tag == 104 {
           setBorderColor(txtExpiryMonth,setBorderColor: objBlackColor)
        }

        textField.becomeFirstResponder()
    }

    func textFieldShouldReturn(textField: UITextField) -> Bool {
        textField.resignFirstResponder()
        return true;
    }

 //User can enter two digits in textfield with tag 101, 103, 104 and four digits in textfield with tag 102
    func textField(textField: UITextField, shouldChangeCharactersInRange range: NSRange, replacementString string: String) -> Bool {
        if let text = textField.text {

            let newStr = (text as NSString)
                .stringByReplacingCharactersInRange(range, withString: string)
            if newStr.isEmpty {
                return true
            }
            let intvalue = Int(newStr)

            if textField.tag == 101 || textField.tag == 103 || textField.tag == 104{
                 return (intvalue >= 0 && intvalue <= 99) ? true : false
            }
            else if textField.tag == 102 {
                 return (intvalue >= 0 && intvalue <= 9999) ? true : false
            }           

        }
        return true
    }

Swift : 用于卡详细信息的 UITextField 的加密输入

Swift : Encrypted input for UITextField for Card details

xcode

credit-card

uitextfield

ios

swift