Swift: Verschlüsselte Eingabe für UITextField für Kartendetails

Question

Ich möchte Card details as input from user akzeptieren. Voraussetzung ist, dass first 10 character will be hidden wo als user will be allowed to enter next 6 character.

I vier Textfeld für diese (meine Vermutung) verwendet haben. Jeder andere Vorschlag ist willkommen.

Q.1. Wie kann man direkt vom 11. Zeichen in das 3. Textfeld eingeben?

Für das Feld Ablaufdatum habe ich zwei Textfelder verwendet.

Q.2. Wie wird das Textfeld nur Rand im unteren (keine linke, rechte und obere Grenze) haben?

Answer 1

ich dieses Problem mit folgenden Ansatz gelöst hatte:

1. Vier Textfeld mit 1. und 2. ein Read- nur. Im dritten Textfeld habe ich das Etikett mit zwei verschlüsselten Werten (d. H. XX) und das dritte Textfeld nur mit zwei Ziffern versehen. Das vierte Textfeld akzeptiert vier Ziffern.

   Hinweis: Ich habe dieses Label und Textfeld-Ansatz verwendet, weil ich Kredit-/Debitkartennummer (14-stellig) bereits von der DB oder einer anderen Quelle haben. Ich muss nur die letzten 6 Ziffern vom Benutzer akzeptieren und mit dem vorhandenen Wert vergleichen.

   Wenn der Benutzer zwei Ziffern im dritten Textfeld eingibt, springt er automatisch zum vierten Textfeld. Wenn der Benutzer dann im vierten Textfeld vier Ziffern eingibt, springt er automatisch in das Textfeld Verfallmonat, gefolgt von Ablaufjahr.

2. setBorderColor Funktion legt nur die untere Rahmenfarbe auf Ablaufmonat und Jahr Textfeld fest.

3. Ich habe UIToolbar with done button auf numerische Tastatur (während der Entwurfszeit festgelegt) für alle Textfeld hinzugefügt.

Im Folgenden finden Sie Code, den ich verwendet habe:

@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() 

Überschreibung 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 
    } 

Answer 2

Q.1. Wie kann der Benutzer direkt vom 11. Zeichen in das 3. Textfeld eingeben?

A-1: ​​txt3.becomeFirstResponder()

Q.2. Wie man Textfeld nur Rand in der Unterseite (keine linke, rechte und obere Grenze) hat?

A-2: Verwenden Sie die folgende Codezeile:

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