Swift: Зашифрованный вход для UITextField для данных карты

Question

Я хочу принять Card details as input from user. Условия является то, что first 10 character will be hidden где, как user will be allowed to enter next 6 character.

Я использовал четыре текстовых поля для этого (моего предположения). Любое другое предложение приветствуется.

Q.1. Как разрешить пользователю вводить непосредственно из 11-го символа в третьем текстовом поле?

Для поля «Дата истечения срока действия» я использовал два текстовых поля.

Q.2. Как сделать текстовое поле с нижней границей (нет левой, правой и верхней границы)?

Answer 1

Я решил эту проблему, используя ниже подхода:

1. Четыре текстового поля с 1-го и 2-го один Read- только. В третьем текстовом поле я разместил метку с двумя зашифрованными значениями (т. Е. XX), а третье текстовое поле принимает только две цифры. Четвертое текстовое поле принимает четыре цифры.

   Примечание: Я использовал эту метку и TextField подход, потому что я номер кредитной/дебетовой карты (14 цифр), уже из БД или другого источника. Мне нужно принять только последние 6 цифр от пользователя и сравнить с существующим значением.

   Когда пользователь вводит две цифры в третьем текстовом поле, он автоматически переходит в четвертое текстовое поле. После этого, когда пользователь вводит четыре цифры в 4-ом текстовом поле, он автоматически переходит в текстовое поле «Срок действия месяца», а затем «Год истечения срока действия».

2. setBorderColor функциональные наборы только нижний цвет границы до месяца истечения месяца и года.

3. Я добавил 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() 

переопределение функ viewDidLoad() { супер.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 
    } 

Answer 2

Q.1. Как разрешить пользователю вводить непосредственно из 11-го символа в третьем текстовом поле?

А-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) 
    }