Best way to adjust letter spacing every 3 chars in Ionic/Angular input box

Question

I'd like users to enter a code and to assist them in transcribing it I'd hope to increase the spacing between every 3rd character they type. I've seen this nicely done for credit cards having 4 character spacing. This will be for an Ionic app so the simple input box coud be replaced with a customised Ionic control.

What methods have you used for this and what works best? Open to Angular/Ionic code samples or a related web site tutorial. Pure CSS would be nice.

Is the code alphanumeric input? – Vega Oct 06 '17 at 12:39 — Vega, Oct 06 '17 at 12:39
I may use it for either number or non-numeric input – Tony O'Hagan Oct 08 '17 at 11:01 — Tony O'Hagan, Oct 08 '17 at 11:01

score 1 · Answer 1 · edited Mar 25 '19 at 07:44

1

You can add space on keyup event.

Example

$('#input').on('keyup', function(e){
    var val = $(this).val();
    var newval = '';
    val = val.replace(/\s/g, '');
    for(var i=0; i < val.length; i++) {
        if(i%3 == 0 && i > 0) newval = newval.concat(' ');
        newval = newval.concat(val[i]);
    }
    $(this).val(newval);
})

edited Mar 25 '19 at 07:44

Zoe

27,060
21
118
148

answered Oct 06 '17 at 02:19

Vijay Baskaran

869
2
9
18

score 1 · Accepted Answer · answered Oct 08 '17 at 18:46

1

Here is an other version, without jquery, works with alphanumerical and takes a configurable separator:

Typescript:

GROUP_SEPARATOR=" ";
...... 
format(valString) {
    if (!valString) {
        return '';
    }
    let val = valString.toString();
    const parts = val.replace(/ /g, '');
    return parts.replace(/\B(?=(?:\w{3})+(?!\w))/g, this.GROUP_SEPARATOR) 
};

HTML

<input [(ngModel)]="input"  
style="border:1px solid black" #myBudget="ngModel" (input)="input = format(input)">

DEMO

answered Oct 08 '17 at 18:46

Vega

27,856
27
95
103

Thanks for the working demo. Current code has a bug that puts a space after the 2nd char whenever you've entered 3n + 1 chars. - Example: "abcd" => "a bcd" – Tony O'Hagan Oct 11 '17 at 04:42
It meant to be like that, but now, I think you would prefer "abc d" ? – Vega Oct 11 '17 at 07:49
This one should be what you meant: https://stackblitz.com/edit/angular-kp2j5v?file=app/app.component.ts – Vega Oct 11 '17 at 21:17
Or just use `format(val) { return val.replace(/([^ ][^ ][^ ]) */g, "\$1 ").trim(); }` – Tony O'Hagan Oct 12 '17 at 10:33
I already tested it, but when you edit the input it breaks :( – Vega Oct 12 '17 at 15:24
Worked for me. I tested it with your demo app code. What was the error you saw? – Tony O'Hagan Oct 12 '17 at 23:57
No error, just after entering, if I come back and enter a new character, then the formatting is broken, ( abc def g -> I insert h between b and c, it makes abh c def g). – Vega Oct 13 '17 at 06:58
Right ... So we just need to strip out any existing spaces before inserting them back: `format(val) { return val.replace(/ +/g, "").replace(/([^ ][^ ][^ ])/g, "\$1 ").trim(); } – Tony O'Hagan Oct 15 '17 at 21:15

score 0 · Answer 3 · edited Mar 25 '19 at 07:43

I found a simpler method based on Vija's method ... Basically we match 3 non-space chars and we remove any previously added space chars. This is needed to allow the user to update or erase any chars in the text box.

A final solution may also need to adjust the position of the cursor based on where it was prior to performing the replace.

$('#input').on('keyup', function(e){
  var val = $(this).val();
  var newval = val.replace(/([^ ][^ ][^ ]) */g, "\$1 ").trim();
  $(this).val(newval);
})

Best way to adjust letter spacing every 3 chars in Ionic/Angular input box

3 Answers3