# Input that adds a comma separator when entering a number

**URL:** https://community.weweb.io/t/input-that-adds-a-comma-separator-when-entering-a-number/5504
**Category:** Ask us anything
**Created:** [November 21, 2023, 2:58pm UTC](https://community.weweb.io/t/input-that-adds-a-comma-separator-when-entering-a-number/5504 "2023-11-21T14:58:05Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![JocsanMorera](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jocsanmorera/32/10693_2.png) [@JocsanMorera](https://community.weweb.io/u/JocsanMorera)
#### Post date: [November 21, 2023, 2:58pm UTC](https://community.weweb.io/t/input-that-adds-a-comma-separator-when-entering-a-number/5504/1 "2023-11-21T14:58:05Z")

</div>

Hi everyone,

I am trying to use an input that adds a comma separator when entering a number(10,000)  
I know that there is an amount field input, which adds the comma when the mouse leaves the amount input, but I need the comma to be displayed in real time when the user is typing the number.

I would like to know if anyone knows a solution for this.

Thanks in advance!

---

<div class="post-metadata">

### Author: ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)
#### Post date: [November 21, 2023, 5:27pm UTC](https://community.weweb.io/t/input-that-adds-a-comma-separator-when-entering-a-number/5504/2 "2023-11-21T17:27:42Z")

</div>

You could try using our new masked input

---

<div class="post-metadata">

### Author: ![JocsanMorera](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jocsanmorera/32/10693_2.png) [@JocsanMorera](https://community.weweb.io/u/JocsanMorera)
#### Post date: [November 22, 2023, 1:18pm UTC](https://community.weweb.io/t/input-that-adds-a-comma-separator-when-entering-a-number/5504/3 "2023-11-22T13:18:32Z")

</div>

I was trying it but I couldn’t put the correct pattern for amounts

---

<div class="post-metadata">

### Author: ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)
#### Post date: [November 22, 2023, 1:44pm UTC](https://community.weweb.io/t/input-that-adds-a-comma-separator-when-entering-a-number/5504/4 "2023-11-22T13:44:52Z")

</div>

I’d try using the AI copilot that is present in WeWeb

---

<div class="post-metadata">

### Author: ![erbteilung](https://avatars.discourse-cdn.com/v4/letter/e/fbc32d/32.png) [@erbteilung](https://community.weweb.io/u/erbteilung)
#### Post date: [December 18, 2023, 2:56pm UTC](https://community.weweb.io/t/input-that-adds-a-comma-separator-when-entering-a-number/5504/5 "2023-12-18T14:56:12Z")

</div>

Have you found a solution? I was not able to find the right pattern for the mask input

---

<div class="post-metadata">

### Author: ![erbteilung](https://avatars.discourse-cdn.com/v4/letter/e/fbc32d/32.png) [@erbteilung](https://community.weweb.io/u/erbteilung)
#### Post date: [December 18, 2023, 3:07pm UTC](https://community.weweb.io/t/input-that-adds-a-comma-separator-when-entering-a-number/5504/6 "2023-12-18T15:07:02Z")

</div>

Broberto is in every thread I am interested in as it seems =) Hi,

I tried the same thing but could not find a solution as all docs and also the ai is telling us to use javascript to change the mask and not only a pattern. It seems as it is not possible without, right?

```auto
var numberMask = IMask(
  document.getElementById('number-mask'),
  {
    mask: Number,
    scale: 0,
    thousandsSeparator: '.'
  });

```

I have the mask input in a repeater…

---

<div class="post-metadata">

### Author: ![erbteilung](https://avatars.discourse-cdn.com/v4/letter/e/fbc32d/32.png) [@erbteilung](https://community.weweb.io/u/erbteilung)
#### Post date: [December 18, 2023, 3:08pm UTC](https://community.weweb.io/t/input-that-adds-a-comma-separator-when-entering-a-number/5504/7 "2023-12-18T15:08:21Z")

</div>

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/95706fdcb4d18de0bba6bd55123221250f0be88b.png)

The Docs for easy patterns are clear but the thousands separator works from right to left so I don’t how to do that just with a pattern…

---

<div class="post-metadata">

### Author: ![pacifist9722](https://avatars.discourse-cdn.com/v4/letter/p/4491bb/32.png) [@pacifist9722](https://community.weweb.io/u/pacifist9722)
#### Post date: [December 20, 2023, 2:01pm UTC](https://community.weweb.io/t/input-that-adds-a-comma-separator-when-entering-a-number/5504/8 "2023-12-20T14:01:00Z")

</div>

Hi @luka if I put a pattern (000,000,000) in masked input pattern it is separating the input but it is doing it from left to right (for ex: 123,45) how do I make it (12,345)?

---

<div class="post-metadata">

### Author: ![Duke\_N](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/duke_n/32/6766_2.png) [@Duke\_N](https://community.weweb.io/u/Duke_N)
#### Post date: [December 20, 2023, 3:59pm UTC](https://community.weweb.io/t/input-that-adds-a-comma-separator-when-entering-a-number/5504/9 "2023-12-20T15:59:41Z")

</div>

For whose still looking a solution, i have one at this comment [Thousands separator comma number input - #2 by Duke\_N](https://community.weweb.io/t/thousands-separator-comma-number-input/6021/2)
