How to enter whitespace only once after 4 characters in a string?

Question

Hey I have a input where the user enters his social security number. To make the input more readable I want to insert a whitespace after the first 4 characters of the string. The social security number itself is 10 numbers long. So the result should looke like: 1234 567890. I only found solutions where a whitespace every 4 characters is inserted but no example which is similar to this. Has someone an idea how to solve this?

<input type="text" maxlength="10" @keyup="insertWhitespace()"/>

Does this answer your question? [How to insert space every 4 characters for IBAN registering?](https://stackoverflow.com/questions/17260238/how-to-insert-space-every-4-characters-for-iban-registering) — RïshïKêsh Kümar, Sep 20 '22 at 10:22

score 2 · Accepted Answer · edited Sep 20 '22 at 11:03

2

You can do this with the use of Regular Expression + HTML DOM Element addEventListener().

Reference Website For "Regular Expression": https://regexr.com/

With the help of a regular expression is a sequence of characters that specifies a search pattern in text or strings.

document.getElementById('example').addEventListener('input', function (e) {
  e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/, '$1 ').trim();
});

<input id="example" maxlength="11" name="example" />

edited Sep 20 '22 at 11:03

Martijn

15,791
4
36
68

answered Sep 20 '22 at 10:32

RïshïKêsh Kümar

4,734
1
24
36

@FloHaberfellner Welcome :), you can read about Regular Expression, and how it exactly works. on a given website. – RïshïKêsh Kümar Sep 20 '22 at 10:36
2

@Martijn Dear First read the user question clearly, they want to insert whitespace after the first 4 characters of the string. So the result should look like: 1234 567890, they don't want white space after every 4 characters just read the question once again. – RïshïKêsh Kümar Sep 20 '22 at 11:12

kavigun · Answer 2 · 2022-09-20T10:09:23.163

0

Here is the solution (Javascript) to your problem:

The code below reads the input value and remove alphabets and then replaces the digit value with the appropriate space character only once as expected after 4 digits.

function insertWhitespace() {
 document.getElementById('myElement').value = document.getElementById('myElement').value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/, '$1 ').trim()
}

<input id="myElement" maxlength="11" onkeyup="insertWhitespace()" />

edited Sep 20 '22 at 10:09

answered Sep 20 '22 at 09:55

kavigun

2,219
2
14
33

I think the code is self-explanatory even to the novice – kavigun Sep 20 '22 at 09:58
I've normalized it a little. Maybe a `onkeyup="insertWhitespace(this)"` would be more elegant, more broadly usable, but thats up to you – Martijn Sep 20 '22 at 10:00
1

I have added explanation – kavigun Sep 20 '22 at 10:03
This only lets you enter 9 numbers. maxlength should be 11. – Tamás Sengel Sep 20 '22 at 10:05
The questioner limited it to 10 characters in the input as per his needs in the question itself. I am just presenting the solution to his problem – kavigun Sep 20 '22 at 10:06
I have updated the max-length to 11 to accommodate 10 digits – kavigun Sep 20 '22 at 10:10

score 0 · Answer 3 · answered Sep 20 '22 at 10:04

0

I think you should make your max length to 11 because white space also counts and try it with the following code

const ssn =  document.querySelector("selector");
ssn.addEventListener("keyup",(e) => {
  if(e.target.value.length === 4){
    ssn.value += " "
  }
})

answered Sep 20 '22 at 10:04

Abbas Shaikh

304
1
9

Supose you write "1234" and want to backspace. You cant :) – Martijn Sep 20 '22 at 11:14

How to enter whitespace only once after 4 characters in a string?

3 Answers3