iOS automatically add hyphen in text field

Question

I'm learning iOS development and am having a hard time figuring out the various events for the controls. For a test I have a UITextField where the user is meant to input a string in the format: XXXX-XXXX-XXXX-XXXX

I want to be able to check how long the text in the field is after each entry and see if it needs to have a hyphen appended to it. I've set up my IBAction function for this but when I assign it to the "Value Changed" event it does nothing, it works fine when I set it on the "Editing Did End" but that will only call when the user exits the control.

Just to add, the "Editing Changed" event causes it to crash too. I assume this is a stack overflow or something where the setting of the text calls the event handler again.

So in short, is there any way to set an event handler for each time the user enters a character in the UITextField?

Whoever

Can you provide some code you have so far? – Alfrediaalfredo

This is almost but not quite a duplicate of Formatting a UITextField for credit card input like (xxxx xxxx xxxx xxxx), and some readers may find my answer there useful. – Schoolroom

This answer can be adjusted to get what you require. Space can be replaced by a hyphen and rest all will remain same. #37191120 – Incipient

Answer 1

Be aware the previous answer is woefully inadequate. Heaven forbid your user enter an incorrect digit and dare attempt to delete it! In fairness, the poster noted the code may not work perfectly. But then, it wouldn't even compile, so the buyer beware filter should already be high. If you fix the compile error and try the code, you'll see you can easily end up with input that does not match the poster's stated format.

Here's a solution I've used for restricting a text field to a phone number of the format 123-456-7890. Adjusting for other numeric formats is trivial. Note the use of the passed NSRange. And BTW, rejecting non-digit characters is needed even when using a numeric virtual keyboard since users can still enter non-digits via a hardware keyboard.

One other note. I add the hyphen after the entry of the 4th and 7th digits to make the deleting of digits a bit easier. If you add after the 3rd and 6th digits, you will have to handle the case of deleting the dangling hyphen. The code below avoids that use case.

// Restrict entry to format 123-456-7890
- (BOOL)                textField:(UITextField *)textField
    shouldChangeCharactersInRange:(NSRange)range
                replacementString:(NSString *)string {

  // All digits entered
  if (range.location == 12) {
    return NO;
  }

  // Reject appending non-digit characters
  if (range.length == 0 &&
       ![[NSCharacterSet decimalDigitCharacterSet] characterIsMember:[string characterAtIndex:0]]) {
    return NO;
  }

  // Auto-add hyphen before appending 4rd or 7th digit
  if (range.length == 0 &&
      (range.location == 3 || range.location == 7)) {
    textField.text = [NSString stringWithFormat:@"%@-%@", textField.text, string];
    return NO;
  }

  // Delete hyphen when deleting its trailing digit 
  if (range.length == 1 &&
      (range.location == 4 || range.location == 8))  {
    range.location--;
    range.length = 2;
    textField.text = [textField.text stringByReplacingCharactersInRange:range withString:@""];
    return NO;
  }

  return YES;
}

Waits

Very nice code. I was stumped after an hour of trying to implement this and then I found your solution. Thanks! – Thistledown

One slight fault in this code.. if the user enters 12 digits and then moves the cursor anywhere other than the end then they can enter more than the character limit – Subfamily

@Subfamily for that case maybe add else if (textField.text.length >= 12 && string.length != 0) {return NO;} The string.length != 0 necessary because it would otherwise block deletion once you reached the max number of characters – Shadowgraph

Another minor issue is that the cursor resets to the end of the string whenever it deletes a number with a hyphen before it – Shadowgraph

(when you move the cursor) Pretty much this method gets a bit thrown off when the user moves the cursor – Shadowgraph

This crashes when the user presses delete when the string is empty. Be sure to protect against that. – Meanie

@dingo Can you please do it for Swif UI – Dorton

Answer 2

dingo sky's answer is good, but in the intrest of helping future people that stumble on this solution, there are a couple problems. Dingo's solution allows you to paste long numeric strings into the field that break the "rules" of the delegate, since it's only using the range location for formatting and length. (you can have more than 12 characters and not have the hyphens).

Simple solution is to calculate the length of the resulting string, and reformat it each time.

An updated version of Dingo's answer is below:

- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {

    //calculate new length
     NSInteger moddedLength = textField.text.length-(range.length-string.length);

    // max size.
    if (moddedLength >= 13) {
        return NO;
    }

    // Reject non-number characters
    if (range.length == 0 &&![[NSCharacterSet decimalDigitCharacterSet] characterIsMember:[string characterAtIndex:0]]) {
        return NO;
    }

    // Auto-add hyphen before appending 4rd or 7th digit
    if ([self range:range ContainsLocation:3] || [self range:range ContainsLocation:7]) {
        textField.text = [self formatPhoneString:[textField.text stringByReplacingCharactersInRange:range withString:string]];
        return NO;
    }

    return YES;
}

#pragma mark helpers

-(NSString*) formatPhoneString:(NSString*) preFormatted
{
    //delegate only allows numbers to be entered, so '-' is the only non-legal char.
    NSString* workingString = [preFormatted stringByReplacingOccurrencesOfString:@"-" withString:@""];

    //insert first '-'
    if(workingString.length > 3)
    {
        workingString = [workingString stringByReplacingCharactersInRange:NSMakeRange(3, 0) withString:@"-"];
    }

    //insert second '-'
    if(workingString.length > 7)
    {
        workingString = [workingString stringByReplacingCharactersInRange:NSMakeRange(7, 0) withString:@"-"];
    }

    return workingString;

}

-(bool) range:(NSRange) range ContainsLocation:(NSInteger) location
{
    if(range.location <= location && range.location+range.length >= location)
    {
        return true;
    }

    return false;
}

Paapanen

If the user moves the cursor, you can still end up with weird behaviour. For example, if they move it to right before a hyphen, it won't delete and the cursor goes to the end of the string. You can also end up with 2 hyphens in a row if you mess around, etc. Obviously you don't necessarily have to worry about these fringe cases, but if it otherwise would crash your app, it would be important to consider. Also pasting doesn't work at all, even if it's a valid paste. – Shadowgraph

Answer 3

For something like this I would suggest using the UITextFieldDelegate to detect whenever the user types a new character. Setup your text field's delegate as follows:

[textField setDelegate:self];

Then, implement the delegate methods as appropriate:

- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    [textField resignFirstResponder]; // hide the keyboard
    return NO;
}
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
    // every time the length reaches four, it gets reset to 0 and a '-' is added.
    static int currentLength = 0;
    if ((currentLength += [string length]) == 4) {
        currentLength = 0;
        [textField setText:[NSString stringWithFormat:@"%@%@%c", [textField text], string, '-'];
        return NO;
    }
    return YES;
}

This may not work perfectly, but I hope it helps!

Stagecraft

Answer 4

Here's my approach that works even when you move the cursor and/or delete ranges of text or even paste valid text in. Basically my approach is to reset the text each time and add in hyphens where appropriate. What makes it complicated is that it also resets the position of the cursor to the right place even if the user moves the cursor to the middle of the string. Unfortunately, there's a lot of cases to consider.

I'll admit, it's ridiculously complicated for such a simple task (definitely could use a major cleanup). Also a bit inefficient, but we're not exactly doing intense computations here. As far as I can tell, it's the most foolproof solution here; I welcome anyone to prove me wrong.

-(BOOL) textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
    if (range.location == 12 || (textField.text.length >= 12 && range.length == 0) || string.length + textField.text.length > 12 ) {
            return NO;
    }

   // Reject appending non-digit characters
   if (range.length == 0 &&
       ![[NSCharacterSet decimalDigitCharacterSet] characterIsMember:[string characterAtIndex:0]]) {
       return NO;
   }

    UITextRange* selRange = textField.selectedTextRange;
    UITextPosition *currentPosition = selRange.start;
    NSInteger pos = [textField offsetFromPosition:textField.beginningOfDocument toPosition:currentPosition];
    if (range.length != 0) { //deleting
        if (range.location == 3 || range.location == 7) { //deleting a dash
            if (range.length == 1) {
                range.location--;
                pos-=2;
            }
            else {
                pos++;
            }
        }
        else {
            if (range.length > 1) {
                NSString* selectedRange = [textField.text substringWithRange:range];
                NSString* hyphenless = [selectedRange stringByReplacingOccurrencesOfString:@"-" withString:@""];
                NSInteger diff = selectedRange.length - hyphenless.length;
                pos += diff;
            }
            pos --;
        }
    }

    NSMutableString* changedString = [NSMutableString stringWithString:[[textField.text stringByReplacingCharactersInRange:range withString:string] stringByReplacingOccurrencesOfString:@"-" withString:@""]];
    if (changedString.length > 3) {
        [changedString insertString:@"-" atIndex:3];
        if (pos == 3) {
            pos++;
        }
    }
    if (changedString.length > 7) {
        [changedString insertString:@"-" atIndex:7];
        if (pos == 7) {
            pos++;
        }
    }
    pos += string.length;

    textField.text = changedString;
    if (pos > changedString.length) {
        pos = changedString.length;
    }
    currentPosition = [textField positionFromPosition:textField.beginningOfDocument offset:pos];

    [textField setSelectedTextRange:[textField textRangeFromPosition:currentPosition toPosition:currentPosition]];
    return NO;
}

OR: just use this https://github.com/romaonthego/REFormattedNumberField

Shadowgraph

Answer 5

After a bit of research I guess the below solution can add/remove a new string at equal intervals automatically.

Explanation: 1. Inserting a new character

    Text        :   XXXX-XXXX-
    Location    :   0123456789

    Objective   :   We've to insert new character's at locations 4,9,14,19,etc. Since equal spacing should be 4.

 Let's assume   y = The location where the new charcter should be inserted,
                z = Any positive value i.e.,[4 in our scenario] and 
                x = 1,2,3,...,n
 Then,
        =>  zx + x - 1 = y              e.g., [ 4 * 1 + (1-1) = 4 ; 4 * 2 + (2 - 1) = 9 ; etc. ]
        =>  x(z + 1) - 1 = y    
        =>  x(z + 1) = (1 + y)
        =>  ***x = (1 + y) % (z + 1)***         e.g., [ x = (1 + 4) % (4 + 1) => 0; x = (1 + 9) % (4 + 1) => 0 ]

 The reason behind finding 'x' leads to dynamic calculation, because we can find y, If we've 'z' but the ultimate objective is to find the sequence 'x'. Of course with this equation we may manipulate it in different ways to achieve many solutions but it is one of them.

 2. Removing two characters (-X) at single instance while 'delete' keystroke

    Text        :   XXXX-XXXX-
    Location    :   0123456789

    Objective   :   We've to remove double string when deleting keystroke pressed at location 5,10,15,etc. i.e., The character prefixed with customized space indicator

 Note: 'y' can't be zero


        =>  zx + x = y              e.g., [ 4 * 1 + 1 = 5 ; 4 * 2 + 2 = 10; 4 * 3 + 3 = 15; etc.]
        =>  x(z + 1) = y
        =>  ***x = y % (z + 1)***         e.g., [ x = (5 % (4 + 1)) = 0; x = (10 % (4 + 1)) = 0; etc. ]

Solution in Swift:

let z = 4, intervalString = " "

func canInsert(atLocation y:Int) -> Bool { return ((1 + y)%(z + 1) == 0) ? true : false }

func canRemove(atLocation y:Int) -> Bool { return (y != 0) ? (y%(z + 1) == 0) : false }

func textField(textField: UITextField, shouldChangeCharactersInRange range: NSRange, replacementString string: String) -> Bool {

        let nsText = textField.text! as NSString

        if range.length == 0 && canInsert(atLocation: range.location) {
            textField.text! = textField.text! + intervalString + string
            return false
        }

        if range.length == 1 && canRemove(atLocation: range.location) {
            textField.text! = nsText.stringByReplacingCharactersInRange(NSMakeRange(range.location-1, 2), withString: "")
            return false
        }

        return true
    }

Fillet

First, it's overcomplicate. Second, doesn't take into consideration shouldChangeCharactersInRange might be called for any amount of character and in the middle of the string. Third, it crashes when removing characters one by one from the end. – Rhinal

Answer 6

You could try this:

[textField addTarget:self action:@selector(textFieldDidChange:) forControlEvents:UIControlEventEditingChanged];

It should really work with that, you should also post some code. After registering with the event you should just check the lenght of the string and add hyphen.

Coherent

Answer 7

The current accepted answer does not account for copy/pasting into the text field

Instead of using the delegate's "shouldChangeCharactersInRange", connect an IBAction from the text field, with the Text Did Change action. Then add the following code:

- (IBAction)textFieldDidChange:(UITextField *)sender {
    if (sender.text.length > 0) {
        NSString *text = sender.text;
        text = [text stringByReplacingOccurrencesOfString:@"-" withString:@""];
        text = [text substringToIndex:MIN(20, text.length)];

        NSMutableArray *parts = [NSMutableArray array];
        int counter = 0;
        while (text.length > 0) {
            [parts addObject:[text substringToIndex:MIN(5, text.length)]];
            if (text.length > 5) {
                text = [text substringFromIndex:5];
            } else {
                text = @"";
            }
            counter ++;
        }
        text = [parts objectAtIndex:0];
        [parts removeObjectAtIndex:0];
        for (NSString *part in parts) {
            text = [text stringByAppendingString:@"-"];
            text = [text stringByAppendingString:part];
        }

        sender.text = text;
    }
}

This is the right way to do this, because if the user pastes text into the text field, you want to format all pasted text accordingly (not just one character at a time).

Carmelinacarmelita