Search code examples
swiftuitextfield

Mask textField in swift


How I can set a mask for text field in swift? for example, a phone text field when the user type its show like as phone format like this code in objective-C:

self.textField.mask = @"(##)####-####";

Solution

  • This way you can create a telephone mask in Swift.

    First create a nifty extension for the String type. The subscript gets the character at an index and the function gets a String.Index type from an int!.

    extension String {  
    subscript (i: Int) -> String {
    
        if countElements(self) > i {
    
            return String(Array(self)[i])
        }
    
        return ""
    }
    
    func indexAt(theInt:Int)->String.Index {
    
        return advance(self.startIndex, theInt)
        }
    }
    

    And this is the function to call on the text in your phone number entry field:

    func returnMaskedPhoneField(thePhoneText:String)->String{
    
        var returnString = thePhoneText
    
        //Trims non-numerical characters
        returnString = returnString.stringByTrimmingCharactersInSet(NSCharacterSet.decimalDigitCharacterSet().invertedSet)
        //Removes all spaces
        returnString = returnString.stringByReplacingOccurrencesOfString(" ", withString: "")
    
        //Checks if we need to format a mobile number
        if thePhoneText[1] == "4"{
    
            if countElements(returnString) > 7 {
    
                returnString = returnString.stringByReplacingCharactersInRange(Range<String.Index>(start: returnString.indexAt(7), end: returnString.indexAt(7)), withString: " ")
    
    
            }
    
            if countElements(returnString) > 4 {
    
                returnString = returnString.stringByReplacingCharactersInRange(Range<String.Index>(start: returnString.indexAt(4), end: returnString.indexAt(4)), withString: " ")
            }
    
        }else {
    
            if countElements(returnString) > 6 {
    
                returnString = returnString.stringByReplacingCharactersInRange(Range<String.Index>(start: returnString.indexAt(6), end: returnString.indexAt(6)), withString: " ")
    
    
            }
    
            if countElements(returnString) > 2 {
    
                returnString = returnString.stringByReplacingCharactersInRange(Range<String.Index>(start: returnString.indexAt(2), end: returnString.indexAt(2)), withString: " ")
            }
    
        }
    
        return returnString
    }
    

    Then then here is where you would implement the function, put this in your viewDidLoad method:

    aTextField.delegate = self  
    aTextField.addTarget(self, action: "validateTextFields:", forControlEvents: UIControlEvents.EditingChanged)
    

    And this one somewhere in the class that's your textfield delegate:

    func validateTextFields(sender:AnyObject){
    
        if let textField = sender as? UITextField {
    
            if textField == aTextField {
    
                if let currentCurserPosition = aTextField?.selectedTextRange {
    
                    var isEndOfString = false
    
                    let currentCurserPositionInteger = textField.offsetFromPosition(textField.beginningOfDocument, toPosition: currentCurserPosition.start)
    
                    if currentCurserPositionInteger == count(textField.text){
    
                        isEndOfString = true
                    }
    
                    aTextField?.text = returnMaskedPhoneField(textField.text)
    
                    if isEndOfString == false {
                        aTextField?.selectedTextRange = currentCurserPosition
                    }
    
                }else {
    
                    aTextField?.text = returnMaskedPhoneField(textField.text)
                }
            }
        }
    }
    

    And it will work like:

    enter image description here

    Credits:

    http://pjeremymalouf.com/creating-a-text-mask-in-swift/

    And if you want to use custom textField then you can use AKMaskField.

    Where you can find textField for phone like this:

    enter image description here