How to convert a comma to dot automatically?

Question

When the user enters a comma in the INPUT, I would like the comma to be automatically transformed in a dot. Is it possible?

<label>Number </label>
<input type="number" maxlength="5" />

Here is a reproduction -> Link

Does this answer your question? [Replace comma with dot in a input Javascript](https://stackoverflow.com/questions/38435744/replace-comma-with-dot-in-a-input-javascript) — MD. RAKIB HASAN, May 23 '22 at 13:04
@MD. RAKIB HASAN, Thanks for your help, the link is for javascript, I am using angular. I don't understand JS — Menier, May 23 '22 at 13:12

score 0 · Answer 1 · answered May 23 '22 at 13:08

0

Using Angular Form Controls will automatically convert it to a correct number :

https://stackblitz.com/edit/angular-ivy-uewxfs?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

answered May 23 '22 at 13:08

Thank you but the comma appears in the input, I would like to replace the comma in the input with a dot, is it possible, please? – Menier May 23 '22 at 13:17
Why would you do that in the first place ? – May 23 '22 at 13:19
it's just a convention. – Menier May 23 '22 at 13:28
Are you aware that this "convention" changes according to the country your app is running ? – May 23 '22 at 14:09

score 0 · Answer 2 · answered May 23 '22 at 13:25

<input> elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.

The user cann't input comma in the INPUT, so first you have to change input type as text. after that on onkeyup event you can replace the value like below:

<input type="text" onkeyup="this.value=this.value.replace(/,/g, '.');"/>

https://stackblitz.com/edit/angular-ivy-hc3mn8?file=src/app/app.component.html

This makes each key down go to last position – Eliseo May 23 '22 at 19:05 — Eliseo, May 23 '22 at 19:05

Eliseo · Accepted Answer · 2022-05-23T19:40:24.627

You can make something like this old SO about mask

Create a directive

@Directive({
  selector: '[notdot]'
})
export class NotDotDirective {

  constructor(@Optional() @Host()private control:NgControl) {}
  @HostListener('input', ['$event'])
  change($event) {

    const item = $event.target
    const value = item.value;
    const pos = item.selectionStart; //get the position of the cursor

    const matchValue = value.replace(/,/g, '.')
    if (matchValue!=value)
    {
      if (this.control)
        this.control.control.setValue(matchValue, { emit: false });

      item.value = matchValue;
      item.selectionStart = item.selectionEnd = pos; //recover the position
    }
  }
}

And use like

<input notdot maxlength="5"/>

NOTE You can use also with template driven forms or with ReactiveForms

<input notdot [(ngModel)]="variable" maxlength="5"/>

<input notdot [formControl]="control" maxlength="5"/>

You can see in this stackblitz

How to convert a comma to dot automatically?

3 Answers3