preface

Recently, in the development of Polymer – packed input boxes for pure numbers, many defects have been found, and there are many areas worth studying. This series will be divided into four parts to tell the story of this epic experience:

  1. Input [type=number]
  2. “Write a Number Input Box 2: Blocking Illegal Characters with Your Hands”
  3. Start writing a Number input Box 3: Pain Points — Input is the Devil
  4. Start Writing a Number Input Box 4: The Devil in the Details — Polishing cursor Position

HTML5 benefits –input[type=number]

<input ID ="age" name="age" type="number" step="1" min="0" Max ="120"> <input ID ="inc" type="button" value=" increment "> <input Id = "dec" type = "button" value = "reduce" > < script > / * tool function... D */ const comp = (... fns) => (... args) => { let len = fns.length while (len--){ args = [fns[len].apply(null, args)] } return args.length > 1 ? args : args[0] } const isSome = x => 'undefined' ! == typeof x && x ! == null const invokerImpl = n => o => m => (... args) => { let args4m = args.splice(0, n) , times = parseInt(args[0]) || 1 , ret = [] while (times--){ ret.push(o[m].apply(o, args4m)) } return ret.length > 1 ? ret : ret[0] } const curry2Partial = fn => (... args) => { let c = true , i = 0 , l = args.length , f = fn for (; c && i < l; ++i){ c = isSome(args[i]) if (c){ f = f(args[i]) } } return f } const invoker = curry2Partial(invokerImpl) const invoker0 = invoker(0) const $ = invoker(1, document, "querySelectorAll") const invoker0AtEl = comp(invoker0, $) /* const invoker0AtAge = invoker0AtEl('#age') // input[type=number] provides two methods to increase and decrease the number of const incAge = invoker0AtAge('stepUp') , decAge = invoker0AtAge('stepDown') $('#inc').addEventListener('click', incAge) $('#dec').addEventListener('click', decAge) </script>Copy the code

Input [type=number] provides the following features:

  1. Limit input only/ + 0-9.These characters
  2. The input method (IME) also cannot enter not/ + 0-9.The character of
  3. Automatic form validation
  4. minandmaxTo limit the lower and upper limits of values;
  5. Two methods, stepUp and stepDown, are provided to control the increase and decrease of numerical values programmatically.
  6. Mobile devices display numeric keypads when they gain focus;
  7. stepSet the step size (default: 1) by clicking the fine tuning button on the right. It can be set to decimal, integer, or integerany.stepIn addition to affecting the step size of the spinner button, the value of
<! Step ="age1" type="number" step="1" value="1"> <input name="age1" type="number" step="1" Value = "1.1" > <! Step ="age2" type="number" step="0.1" value="1"> <input name="age2" type="number" step="0.1" Value = "1.1" > < input name = "age2" type = "number" step = "0.1" value = "1.11" > <! --> <input name="age3" type="number" step="any" value="1"> <input name="age3" type="number" step="any" Value ="1.1"> <input name="age3" type="number" step="any" value="1.11"> <script> // Display true false $('[name=age1]').foreach (el => console.log(el.validity.valid)) true true false $('[name=age2]').foreach (el => Console. log(el.validity.valid)) // Displays true true true true $('[name=age3]').foreach (el => console.log(el.validity.valid)) </script>Copy the code

In addition, setting it to any allows form validation to be independent of precision, and the step size is actually still 1.

Sorry about my brother

At this point I think you can see why the precision is missing. It is true that input[type=number] does not provide us with properties or methods to set precision. But is that not the only regret?

  1. No precision precision setting;
  2. Don’t want the fine tuning button on the right…
  3. Click the fine tuning button and callstepUpandstepDownSetting values are really limited tominandmaxInterval, but direct input is not restricted…
  4. Multiple decimal points can be entered, as in2012.12.12;
  5. Set up thestep=anyChrome on Android’s numeric keypad has lost the decimal point button.

  6. After setting step=any, click the fine tuning button to set the step size to 1, but call stepUp and stepDown will report

    Uncaught DOMException: Failed to execute 'stepUp' on 'HTMLInputElement': This form element does not have an allowed value step.Copy the code

Hide the right spinner button not complete solution

Webkit and Gecko use the following CSS to hide the right trim button

/* chrome */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none! important; margin: 0; } /* Firefox */ input[type=number]{ -moz-appearance: textfield; }Copy the code

IE has no solution 🙁

conclusion

If HTML5 is willing to give us a new input[type=number], why does it give us a missing one? Can only say that it was feeling when putting meaning, since it is not satisfied, then his writing luo:) respect for the original, reproduced please indicate from: www.cnblogs.com/fsjohnhuang… ^_^ fat John

Scan this article if you find it interesting! Donation mutual encouragement!