javascript - How to restrict from entering a decimal value in input type number? - Stack Overflow

admin管理员组

文章数量:1327987

So I want to have an input of type number <input type="number"> and I want to RESTRICT users from ENTERING DECIMAL VALUE

Note: I'm hiding the spin buttons of the input type text. Know more here

EDIT: ANYTHING WILL WORK! EVEN JAVASCRIPT!

---

I searched a lot but found nothing.

I did find this answer but it basically blocks the use of any other key on the keypad except the number keys, so the basic problems occur such as the user cannot use backspace and cut the number entered, another problem is the user cannot use tab to change focus onto the next input.

---

Thank You!

So I want to have an input of type number <input type="number"> and I want to RESTRICT users from ENTERING DECIMAL VALUE

Note: I'm hiding the spin buttons of the input type text. Know more here

EDIT: ANYTHING WILL WORK! EVEN JAVASCRIPT!

---

I searched a lot but found nothing.

I did find this answer but it basically blocks the use of any other key on the keypad except the number keys, so the basic problems occur such as the user cannot use backspace and cut the number entered, another problem is the user cannot use tab to change focus onto the next input.

---

Thank You!

• javascript
• html
• css

Share Improve this question Follow edited Nov 21, 2021 at 15:12 Adarsh Dubey asked Nov 21, 2021 at 13:55 Adarsh DubeyAdarsh Dubey 35055 silver badges1717 bronze badges 14

• "I want to RESTRICT users from ENTERING DECIMAL VALUE" plus this "and NOT JavaScript" - You cannot achieve this goal without JavaScript. – Randy Casburn Commented Nov 21, 2021 at 14:02
• You can use the pattern attribute, but it may not do what you want without JavaScript – evolutionxbox Commented Nov 21, 2021 at 14:03
• @RandyCasburn it is not preferred, but like I said, anything will work fine – Adarsh Dubey Commented Nov 21, 2021 at 14:05
• 1 @evolutionxbox - pattern attribute does not control what is typed by the end user - only applies to constraint API and what is accepted as a valid input. You can also use the step attribute, but also doesn't restrict input. – Randy Casburn Commented Nov 21, 2021 at 14:07
• @RandyCasburn indeed, it is not an exact solution. Hence the ment not an answer. – evolutionxbox Commented Nov 21, 2021 at 14:08

 |  Show 9 more ments

2 Answers 2

Sorted by: Reset to default 5

Preventing user input can be done with JavaScript. I'd use the input event for catching values, as it's a unified interface, enpassing any input method you can think of keyup, paste, pointer events, touch events, etc...

document.querySelector('input').addEventListener('input', e => {
  e.target.value = Math.round(e.target.value.replace(/\D/g,''))
});

<input>

But you really should not do it! For at least the following reasons:

1. Forbidding user input is, by and large, perceived as disrespectful and drives users away. In short, it reduces any user engagement metric you can think of (funneling, sales, visits, sharing, etc...). Don't take my word for it. Do some A/B testing: present the same form with and without blocking user input and look at the results.
2. Form elements are just tools to help users give you data. But they are pletely by-pass-able. If you give me a form I can send whatever I want using it, by simply opening the browser console. The validation must be done on server side. If you're using the value to do something on client side, sanitize the input value in the method, without changing user input.
3. A respectful way to inform users decimal values are not valid is by making the input :invalid, using the pattern attribute ( e.g: pattern="[0-9]"), styling accordingly (e.g: :invalid { border-color: red }), and displaying an appropriate message.
   Don't delete or block user input. They'll do it themselves if you tell them why the value is invalid.
4. When following web standards, your solution lasts. When you e up with hacks, there will always be the odd device in which your hack doesn't work. You don't know where things will be in 1-2 years from now, nevermind 5 or 10.
5. Last, but not least, have a closer look at Constraint Validation. You'll need to know and use it when creating quality UX and accessible forms.

This is one option for creating an input element using javascript to limit the values that can be entered. I create an array of allowed keys, including all the digits, backspace, and tab as you specified. I added an event listener for the keydown event, and if the key pressed is not in the allowed group, I prevent the default action, or prevent the value from being entered.

I also added an event listener to the paste event, as you could right click paste and enter information that does not meet the criteria. Instead of trying to validate pasted values I disable pasting all together.

If you have any questions, please ask.

const allowedKeys = [..."0123456789", "Backspace", "Tab"];
const myInput = document.querySelector("input");
myInput.addEventListener("keydown", e => {
  const key = e.key;
  const allowed = allowedKeys.includes(key);
  if (!allowed) e.preventDefault();
});
myInput.addEventListener("paste", e => e.preventDefault());

<input type="number">

本文标签： javascriptHow to restrict from entering a decimal value in input type numberStack Overflow