html - Can't type a comma , in <input type="number"> on Samsung tablets - Stack Overflow

admin管理员组

文章数量:1303327

I'm developing a React application that includes a form with an <input type="number"\>. It works fine on most devices, but on Samsung tablets with the default keyboard, I can't enter a comma (,) for decimal values.

Here’s my input code:

<input
  type="number"
  min="0.01"
  className="textInputPVP"
  value={producto.PVP}
  onChange={(e) =>
    actualizarProducto(producto.uniqueId, "PVP", + e.target.value)
  }
  onFocus={handleFocus}
/>

What happens?

• The Samsung keyboard does not show the comma (,), making it impossible to enter decimal numbers in locales where the comma is the standard separator.

• It works fine on IOS and other keyboards.

What I tried:

• Using inputMode="decimal" to force a numeric keyboard.

• Changing type="number" to type="text" and validating the input manually.

• A significant changing like this:

<input
    type="tel"
    inputMode="decimal"
    className="textInputPVP"
    value={producto.PVP}
    onChange={(e) =\> {
    let value = e.target.value.replace(".", ",");
    if (value === "" || isNaN(+value)) return;
    actualizarProducto(producto.uniqueId, "PVP", +value);
    }}
    onFocus={handleFocus}
/\>

Solution I found:

After some testing, I realized the issue is specific to the Samsung default keyboard. Simply installing and using Gboard solves the problem immediately without any code changes.

I'm developing a React application that includes a form with an <input type="number"\>. It works fine on most devices, but on Samsung tablets with the default keyboard, I can't enter a comma (,) for decimal values.

Here’s my input code:

<input
  type="number"
  min="0.01"
  className="textInputPVP"
  value={producto.PVP}
  onChange={(e) =>
    actualizarProducto(producto.uniqueId, "PVP", + e.target.value)
  }
  onFocus={handleFocus}
/>

What happens?

• The Samsung keyboard does not show the comma (,), making it impossible to enter decimal numbers in locales where the comma is the standard separator.

• It works fine on IOS and other keyboards.

What I tried:

• Using inputMode="decimal" to force a numeric keyboard.

• Changing type="number" to type="text" and validating the input manually.

• A significant changing like this:

<input
    type="tel"
    inputMode="decimal"
    className="textInputPVP"
    value={producto.PVP}
    onChange={(e) =\> {
    let value = e.target.value.replace(".", ",");
    if (value === "" || isNaN(+value)) return;
    actualizarProducto(producto.uniqueId, "PVP", +value);
    }}
    onFocus={handleFocus}
/\>

Solution I found:

After some testing, I realized the issue is specific to the Samsung default keyboard. Simply installing and using Gboard solves the problem immediately without any code changes.

• html
• reactjs
• input
• keyboard
• samsung

Share Improve this question Follow asked Feb 10 at 10:24 Joan Jorda MoltoJoan Jorda Molto 111 bronze badge

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Quickest fix: probably try directly HTML lang attribute: what is the role of the locale? (but only temporal and try it well on other devices, while you implement a long run fix).

And for the long run...

I think that for solving this kind of issue and many others you should:

1. offer a configuration screen which on some section allow users to enable various options for fixing this kind of issues,
2. or even better, try to detect the issue automatically and show a floating mini dialog sugesting the user to enable the fix. Both if you detect the problem via user-agent signature or thru user's strange behaviour. I'd show always 3 options on these floatings: a. enable fix b. contact for feedback and c. close this dialog.
3. implement the fix itself: can be the simply HTML lang attribute: what is the role of the locale? thing or maybe something more radical like downgrading all numeric inputs into text inputs (maybe with character restriction into them).

About previous answer: requiring the users to install an 3rd party app, even being from google is probably a very bad idea, even if they are only less than a hundred): can be very problematic, time consuming and even potential legal problems issue... you know if you talk to near any client service department anytime soon.

The issue comes from the Samsung default keyboard, which disables the comma (,) in <input type="number">.

✅ Quickest Solution: Simply install and use Gboard instead of the Samsung keyboard. This fixes the issue immediately.

本文标签： htmlCan39t type a commain ltinput typequotnumberquotgt on Samsung tabletsStack Overflow