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

This article mainly introduces how to make HTML5 digital input only accept integers, with certain reference value, interested friends can refer to, I hope you have a lot of gains after reading this article, let Xiaobian take you to understand.

Problem 1: Bad script

The most common defect is the lack of proper degradation functionality. If you're going to build a full stack application in "electron" or "nw.js," that's fine, but something of this form usually doesn't have a place in a public-facing website.

As I often say, high-quality scripting should enhance pages that are already working, not the only way users can use it.

Solution?

Use the pattern and step attributes to limit valid content.

Question 2: Incorrect or incomplete regular expression pattern

The pattern most commonly used by people is [-/ d] *, whose problem is allowing minus signs everywhere. While it is certainly possible to use type = "number" to solve the problem, it is not a good choice. This is especially true when intercepting keys, since 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.

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.

Easy!

Question 3, Using Event Attributes in Tags

I know there are plenty of mouth-breathers encouraging this in the JSX garbage, but if you're writing vanilla or any other system, please, out of love for Christmas, remove your head from the rectum of 1997.

Placing "on keypress" or "on change" in the tag means missing a caching opportunity and violating the principle of separation of attention. Putting JavaScript into markup in this way, like everything else discarded in HTML 4 Strict, is outrageous. Just as if you were going to pee on your HTML with attributes like "text-white box-shadow col-4-s," admit defeat and go back to writing HTML 3.2 with all those FONT / CENTER tags, COLOR, BGCOLOR, SIZE, BORDER, and ALIGN attributes, and "tables for layout," which you all seem to have clearly and dearly missed.

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

Solution?

Element.addEventListener, please use it!

Question 4, each input must be hardcoded

Whether it's putting event attributes into tags via Question 3 or capturing them by manually fetching unique IDs, I've found very few codebases that can actually use plug-and-play tagging applications!

Solution?

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

Issue 5, Some scripts block use of navigation controls and normal editing!

By intercepting and allowing only minus signs and 0... 9, they prevent backspace, enter, tab, arrow, delete, insert, etc. Not all browsers will send these as event. keys, depending on what event you hook. For example,"keypress" events are filtered out in Firefox and Chrome so as not to disrupt normal form usage, but "Old Edge" and Safari do not, and "keydown" filters nothing.

Solution?

Because the "keypress" event is inconsistent across browsers, use keydown instead. Then we can take advantage of the fact that all 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 has as much functionality as possible without JavaScript in the first place!

HTML：

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

JavaScript：

Then we can use JavaScript to restrict user input so that people don't even allow invalid values to be entered.

(function() { var integers = document.querySelectorAll( 'input[type="number"][step="1"]' ), intRx = /\d/; 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 package it in IIFE to isolate the scope. Then, grab all the input we want to hook on the page and create our regular expression.

I create regular expressions at the beginning of events rather than inside them so we don't waste time creating them on every damn key. This is where anonymous functions can incur overhead and where you need to tell "functional programmers" and their "side effects" crap.

Loop through all inputs and assign event handlers to them.

The above handler is simply checking our returns. Controls like arrows, backspace, and enter return full text describing them, so if event.key length>1, we don't block them.

If it is a minus sign and the first character, it is allowed by return.

If it is a number, allow it by return.

If neither, stop the event.

Live Demo

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

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

Thank you for reading this article carefully. I hope that Xiaobian's article "How to make HTML5 digital input only receive integers" will be helpful to everyone. At the same time, I hope that everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

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.