Formatting input value using javascript as the user types a value into the input field

Question

I have an input field of length 14 into which the user types a value. As the user types into it, I would like a space to be added automatically after first 2 characters and then after next 3 characters and then after next 3 characters. so if the user wants to enter 12345678901, it should be formatted to 12 345 678 901.

Also when user uses backspace to clear the characters, the space should automatically be removed. So in the above case when the cursor reaches 9 and user hits backspace, the cursor should move two places to left clearing 9 and the space before it.

I tried following the credit card formatting here Format credit card number but couldn't understnd how it is done. The code from above link is

formatInput(event: any) {
    var v = event.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
    var matches = v.match(/\d{4,16}/g);
    var match = matches && matches[0] || ''
    var parts = []

    for (let i=0, len=match.length; i<len; i+=4) {
       parts.push(match.substring(i, i+4))
    }

    if (parts.length) {
      (<HTMLInputElement>document.getElementById("txtInput")).value = 
        parts.join(' ')
    } else {
        (<HTMLInputElement>document.getElementById("txtInput")).value 
          = event.value;
    }
}

The above code generates spaces after every 4 digits. My requirement is to accept any characters and generate spaces after first 2 characters and then after next 3 characters and then after next 3 characters. Please help me out with this.

You should share your current code in order to see where you are going wrong. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Mar 8, 2021 at 12:42
There are too many nuances with these solutions, and they all depend on your current code. So, please start on it, do something, and then please come back with a more specific question. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Mar 8, 2021 at 12:47
Maybe var matches = v.split(/(?<=^\d{2})|\B(?=(?<=\d{4})(?:\d{3})+$)/)? — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Mar 8, 2021 at 13:14

Abdel Kader Glt · Accepted Answer · 2021-03-08 13:29:11Z

1

this is a working example that solves your problem.

function format(str) {
 if (str.length < 2) return str
  else {
    let [fl,sl,...lstr] = str
    lstr =lstr.reduce((acc, el, i) => (i % 3 ? acc[acc.length - 1]+=el : acc.push(el), acc),[])
  return `${fl}${sl} ${lstr.join(' ')}`.trim()
  }
}



const [input,result]= document.querySelectorAll('#input,#result')
input.oninput =()=>{
    const i = input.value.replace(/\s/g, '');
    input.value= format(i)
  }

<input type=text id=input />
<p id="result"></p>

answered Mar 8, 2021 at 13:29

Abdel Kader Glt

662 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

suvenk Over a year ago

Abdel: Your solution fixed the problem. Thank you so much :)

suvenk Over a year ago

There is one issue I noticed. If the value is 12 345 678 901 and if I focus the cursor to just after any space i.e before 3 or 6 or 9 and click backspace, the cursor moves to the end of the value i.e after last 1. For example if I focus the cursor to just before 3 and click backspace, the cursor moves to end of the value without actually deleting the space. How to fix this issue?

Abdel Kader Glt Over a year ago

this behavior is expected because deleting a space retrigger the function that reformats the input so space takes its place again

suvenk Over a year ago

Okay. Thank you.

suvenk Over a year ago

Hi Abdel. Can you also please elaborate on what each line does in the above function?

Collectives™ on Stack Overflow

Formatting input value using javascript as the user types a value into the input field

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related