Shulou(Shulou.com)06/03 Report--

This article is about how to make HTML5 digital input accept only integers. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The overall concept makes sense: use the HTML 5 attribute to limit what can be sent to the server, and then use Javascript to enhance it to limit what users can enter in the first place.

So let's look at these problems and implement them better.

Question 1, bad script

The most common defect is the lack of proper downgrade functionality. If you want to build a complete stack application in "electron" or "nw.js", that's fine, but this form of stuff usually has no place in public-facing Web sites.

As I often say, a high-quality script should enhance a page that is already working, not the only way users can use it.

The solution?

Use the pattern and step properties to restrict valid content.

Question 2, the regular expression pattern is incorrect or incomplete

The most commonly used pattern is [- / d] *, which has the problem of allowing minus signs anywhere. While it's certainly possible to use type = "number" to solve the problem, it's not a good choice. This is especially true when intercepting keys, because the minus sign can only be the first character.

It can also be problematic because some implementations are not regular expressions, which can lead to false positives.

The solution?

For HTML, use a better expression: ^ [- d]\ d $is more robust and accurate. The minus sign can be the first character at the beginning of the match, followed by zero or more decimals until the end of the string.

For JavaScript, use only regular expressions to test numbers and apply some more practical logic to detect other values.

It's easy!

Question 3, using event attributes in tags

I know there are a lot of mouth-breathing people in JSX garbage who encourage this, but if you're writing vanilla or other systems, take your head out of your rectum in 1997 out of love for Christmas.

Putting "onkeypress" or "onchange" in the tag means missing a caching opportunity and violates the principle of separation of concerns. Putting JavaScript in tags in this way, like everything that has been discarded in HTML 4 Strict, is ridiculously stupid. Just like if you're going to pee on your HTML with attributes like "text-white box-shadow col-4-s", please admit failure, and then go back to writing HTML 3.2 with all those FONT / CENTER tags, COLOR, BGCOLOR, SIZE, BORDER and ALIGN attributes, and "tables for layout" that you seem to have clearly and cherished missed.

This also means that you do not have full / appropriate event handler access.

The solution?

Element.addEventListener, please use it!

Question 4, each input must be hard-coded

Whether I capture event attributes in tags through question 3 or by manually fetching a unique ID, I find little code base that can actually use plug-and-play markup applications!

The solution?

Document.querySelectorAll ('input [type = "number"] [step= "1"]') gives us all the integer input we want, so we can enhance it.

Question 5, some scripts prevent the use of navigation controls and normal editing!

By intercepting and allowing only minus and 0.9, they prevent backspace, enter, tab, arrow, delete, insert, and so on. Not all browsers send these as event.key, depending on what event you are hooked on. For example, "keypress" events are filtered out in Firefox and Chrome to avoid disrupting normal form usage, but "old edge" and Safari do not, and "keydown" does not filter anything.

The solution?

Because the "keypress" event is inconsistent across browsers, keydown is used instead. Then we can take advantage of the fact that all the control keys return multiple characters in the Event.key value, and we just need to check Event.key.length > 1 to say "continue to allow these".

As mentioned earlier, all we need is a simple input that first has as much functionality as possible without using JavaScript!

HTML:

Only accept integers. If you want to accept only positive numbers, you can change it to pattern= "/ d +".

JavaScript:

Then we can use JavaScript to restrict the user's input so that people are not even allowed to enter invalid values.

(function () {var integers = document.querySelectorAll ('input [type = "number"] [step= "1"]'), intRx = /\ d var input of integers; for (var input of integers) {input.addEventListener ('keydown', integerChange, false) } function integerChange (event) {if ((event.key.length > 1) | | (event.key = = "-") & & (event.currentTarget.value.length = 0)) | | intRx.test (event.key) return; event.preventDefault ();}}) ()

We first wrap it in IIFE to isolate the scope. Then, grab all the input we want to attach to the page and create our regular expression.

I create regular expressions at the beginning of the event instead of inside the event, so we don't have to waste time creating it on every damn button. This is where anonymous functions can incur overhead, and where you need to tell "functional programmers" and their "side effects" nonsense.

Loop through all inputs and assign event handlers to them.

The above handler is just checking our return. Control keys such as arrowheads, backspace keys, and enter keys all return full text to describe them, so if the length of the event.key is greater than 1, let's not stop them.

If it is a minus sign and the first character, allow it through return.

If it is a number, allow it through return.

If neither, stop the event.

Live Demo

This is a codebook that includes several text fields and multiple integer and non-integer number fields, so you can see that it really hooks only the fields we want.

Https://codepen.io/jason-knight/pen/QWGyrwq

An unresolved question

One thing I might consider adding is to hook the "change" event to intercept the paste, but since the "pattern" attribute does not allow invalid values to be submitted, there should be no problem.

Thank you for reading! On "how to make HTML5 digital input only accept integers" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.