preface

In the H5 development process, there is a very common scenario when it comes to user-input forms: input numbers, and on this basis, a series of logical processing such as limiting the number range is often involved.

That’s fine, but my pet peevish is the device’s keyboard, which currently calls up the phone’s number with type=”tel”. If you want to type a minus sign, you have to put up with the default keyboard.

Don’t put up with it. Build a wheel

I decided to build my own wheel and had some weird ideas to support, so vue-input-Keyboard.

I think there are a few features in the wheel that I can be pretty cool about, such as the ability to drag and drop numbers in any position, cursor positioning, and the ability to dynamically predict button availability based on the range of valid values.

Basic features:

  • Support to enter regular numeric values, support negative numbers, support decimals.
  • Supports touch screen operation
  • Supports clear, delete, and confirm operations. Delete (back one space), clear (clear text area), return (submit)

Advanced features:

  • Replace a specified digit: After holding down a character in the text area, move the mouse (or finger) to the key in the key area and release it, then replace the current character with the character of the target key.
    • Deletes the current character if it is released on the DELETE key. (And directly click the delete key effect is the same)

  • Support cursor anchor point movement:
    • Click the text area character to position the cursor to the right of the modified character (clicking delete at this time will delete the character to the left of the cursor, namely the current character)
      • Hold down the text area character mouse (or finger) to slide over the text area, the cursor will also move.
    • Click the blank area to the left of the text area to position the cursor to the left of the leading character (when there is no character left of the cursor, clicking the Delete key will delete the leading character)

  • Predict the validity of the values and dynamically display the clickable state of the keys

Endless exploration of detail

  • If the value range doesn’t contain zero, it’s a complicated problem, but now that we’re done, we can intelligently determine which keys are available, and step by step guide the user to enter the number and finally reach the valid range.
  • What if the initial value is not a valid value? Mark red, or you will give up the modification, otherwise please manually correct and redo, no submission is allowed anyway,
  • Automatic optimization of the first 0 or dot all kinds of strange situations, such as 1000 delete the first 1 should return to a 0, such as 0.01 delete the first 0?
  • Again, what keys can and can’t be clicked under what circumstances, this is a very complicated problem, so most of the scenarios have been solved.
  • The left cursor can only exist in the first position. No matter whether the cursor is on the left or right of the text, the left area of the cursor is used to insert or replace the text.
  • The value of disabled can be null, true, or 1, either of which is supported.
  • What happens if the attribute min is greater than Max? I think we should be smart enough to allow this kind of special situation.
  • In other words, the min and Max values don’t have to be numbers, strings don’t have to be strings, so you don’t have to worry about the details. Laziness is the father of science.

Installation and use

Go directly to GitHub link, here does not have a long paste API.

Github.com/wanyaxing/v…

After the language

I made a wheel on impulse. Please give it a thumbs up. Thank you.

From the original star blog: wanyaxing.com/blog/201808…