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

This article focuses on "how to use enhanced Java". Friends who are interested may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use enhanced Java.

The number type of the input tag provides a good way to deal with numbers. We can use the min and max properties to set boundaries, and we can add or subtract 1 by up and down keys, and if we set the step property, up or down keys to add or decrease the corresponding step values. But what if we want users to move up and down with different step?

Step not only determines the number to add or remove, but also determines the limit position of that number. If you enter a value of 5 and step 10, and then press the up key, you won't get 15 (5 + 10), but 10 (the nearest step multiple).

So, what should we do if we want the user to enter any number and want to increase it by 10?

How to enhance the input type=number experience

Let's first define some keystroke operations. When users use arrow keys in the input tag, there are some corresponding shortcuts:

If you press the up or down keyboard, we need to add or subtract 1.

If you press shift and press the up or down arrow keys, we will add or subtract 10

If you press alt and press the up or down arrow keys, we want to add or subtract 0.1.

If you press ctrl and press the up or down arrow keys, we want to add or subtract 100and the cmd key corresponding to Mac

If the input is empty, it is calculated according to the min value

Realize

This is the complete code, it is relatively concise, only about 20 lines of code.

Const isMac = navigator.platform = = 'MacIntel'; const KEY = {UP: 38, DOWN: 40,}; document.querySelector ("input"). AddEventListener ("keydown", e = > {if ([KEY.UP, KEY.DOWN] .requests (e.keyCode)) {e.preventDefault (); const currentValue = isNaN (parseFloat (e.target.value))? ParseFloat (e.target.getAttribute ("min")) | | 0: parseFloat (e.target.value); const direction = e.keyCode = KEY.UP? 1:-1; const modifier = (isMac? E.metaKey: e.ctrlKey)? 100: e.shiftKey? 10: e.altKey? 0.1: 1; const decimals = Math.max ((currentValue.toString (). Split (".") [1] | | ". Length, e.altKey? 1: 0); const newValue = currentValue + direction * modifier; e.target.value = newValue.toFixed (decimals);}})

Some parts of this code may not be easy to understand, let's look at the meaning line by line.

Const isMac = navigator.platform = = 'MacIntel'; const KEY = {UP: 38, DOWN: 40,}

In Windows and Linux, ctrl is the key we want to use, but cmd is more commonly used on Mac. IsMac is a Boolean value indicating whether it is a Mac or Window system.

Every key you press on the keyboard has a unique key code. The up arrow key is 38. The down arrow key is 40. Because I don't like the magic numbers in the code, we store them in an object for later use.

Document.querySelector ('input') .addEventListener (' keydown', e = > {...}

Then there is the keydown event that listens to input. Keydown can tell us which key to press and which modifier key to press. The modifier keys we are interested in are shift,alt,ctrl and cmd. MetaKey corresponds to the cmd key on Mac and the windows key in Windows.

If ([KEY.UP, KEY.DOWN] .cake (e.keyCode)) {e.preventDefault ();...}

If the user is pointing left or right, we will do nothing. We added an if clause around the code to execute only if the user presses the up or down keyboard. When the user presses the up or down keys, we call e.preventDefault (). This prevents the input from being updated because we will do it ourselves.

Const currentValue = isNaN (parseFloat (e.target.value))? ParseFloat (e.target.getAttribute ("min")) | | 0: parseFloat (e.target.value)

You might think that getting a value is as easy as getting an e.target.value, but we have to do more. E.target.value is always a string, even for input elements of type npmber, so for any mathematical operation, we need to convert it to a number. Because we need to be able to add / subtract 0.1, we need to use floating-point numbers instead of integers.

Yes, if the input is empty, we call parseFloat, which returns a nan value. Since we cannot add or subtract NaN, we need to judge some time lines. If the input is empty, then we will get the minimum value (if any), or the default is 0. The minimum value is also a string, so we also need to convert it.

If the min attribute is not defined, it becomes NaN, and NaN | | 0 resolves to 0, so the result can be calculated.

Const direction = e.keyCode = = KEY.UP? 1:-1

We already know the up or down keys that the user presses from the if clause, so we need to check whether the user presses the up or down keyboard to determine if we need to add or subtract. We save it with the variable "direction". If it is up, the value is 1 and down is-1, which can then be multiplied by later values.

Const modifier = (isMac? E.metaKey: e.ctrlKey) 100: e.shiftKey? 10: e.altKey? 0.1: 1

Let's find out which modifier key was pressed. The event property can tell us. If we press the shift or alt key while we press the up or down arrow keys, the value of e.shift Keybook e.altKey is true.

Let's first use (isMac? E.metaKey: e.ctrlKey) to check the meta key or ctrl key, depending on whether we are on the Mac or not. If so, we will add or subtract 100. If we press shift instead, we use 10 plus or minus, and if we press Alt, we add 0.1. If you do not press these keys, press the default behavior to add or subtract 1.

Const decimals = Math.max ((currentValue.toString (). Split (".") 1 | | ") .length, e.altKey? 1: 0)

It's a little tricky here because we're using floats. Floating-point numbers in JavaScript can produce unexpected results due to rounding. Specifically, if you add, for example, 0.1`` and 0.2, you get a value of 0.300000000000004, which is about 0.3.

In the basic calculation, the number of zeros is too large, but it doesn't matter, and in the input element, 0.300000000000004 doesn't look very good. We only need 0.3. To do this, we need to know what the maximum number of decimals before calculation is, that is, the number of decimals currently entered, or the 1 when alt is pressed, which is greater. We store this value for later use.

Const newValue = currentValue + direction * modifier

This is the final result value. We know the current value, the amount to increase or decrease, and whether it needs to be increased or decreased.

We multiply modifier (the amount to be added) by direction (that is, + 1 or-1) so that it can be added or subtracted when it is added to the current value.

Now we have calculated the new value, but because of the strange rounding mentioned earlier, we cannot directly set it to the new value as the input value, because it may have a lot of decimals. Instead, we use toFixed with the number of decimals we found earlier

E.target.value = newValue.toFixed (decimals)

This is all the code.

At this point, I believe you have a deeper understanding of "how to use enhanced Java". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue 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.