Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 = @"(##)####-####";
like image 303
Daniel Avatar asked Aug 14 '15 18:08

Daniel


3 Answers

Swift 4 Very Easy and with Masking Max text field length and Handle Back Space

 //MARK: - text field masking
internal func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {

    //MARK:- If Delete button click
    let  char = string.cString(using: String.Encoding.utf8)!
    let isBackSpace = strcmp(char, "\\b")

    if (isBackSpace == -92) && (textField.text?.count)! > 0 {
        print("Backspace was pressed")
        textField.text!.removeLast()
        return false
    }

    if textField == txtworkphone
    {
        if (textField.text?.count)! == 3
        {
            textField.text = "(\(textField.text!)) "  //There we are ading () and space two things
        }
        else if (textField.text?.count)! == 9
        {
            textField.text = "\(textField.text!)-" //there we are ading - in textfield
        }
        else if (textField.text?.count)! > 13
        {
            return false
        }
    }
}
like image 192
Shakeel Ahmed Avatar answered Sep 20 '22 13:09

Shakeel Ahmed


Swift 4&&5 Very Easy Phone Number mask

You must use this code as the text field delegate.

 func formattedNumber(number: String) -> String {
                 let cleanPhoneNumber = number.components(separatedBy: CharacterSet.decimalDigits.inverted).joined()
                 let mask = "## ### ###"
                 var result = ""
                 var index = cleanPhoneNumber.startIndex
                 for ch in mask! where index < cleanPhoneNumber.endIndex {
                     if ch == "#" {
                         result.append(cleanPhoneNumber[index])
                         index = cleanPhoneNumber.index(after: index)
                     } else {
                         result.append(ch)
                     }
                 }
                 return result
             }
             func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string:  String) -> Bool {
                 guard let text = textField.text else { return false }
                 let newString = (text as NSString).replacingCharacters(in: range, with: string)
                 textField.text = formattedNumber(number: newString)
                 return false
             }
like image 29
yassine menssi Avatar answered Sep 20 '22 13:09

yassine menssi


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

like image 33
Dharmesh Kheni Avatar answered Sep 19 '22 13:09

Dharmesh Kheni