Digital keyboard with decimal point under IOS

Time:2021-8-26

problem

In business development, we often encounter the problem of popping up the numeric keyboard. The product side wants to pop up the pure numeric keyboard with decimal point.
The following code:

<input type='number'/>

In Android, you can pop up a keyboard with numbers and decimal points, and it will automatically screen illegal characters, which is perfect.
However, IOS is not a pure numeric keyboard, but the first line of the keyboard is a number:
Digital keyboard with decimal point under IOS

And IOS can not prevent Chinese, letters, spaces, and various special symbols. Moreover, after entering these symbols, the bound value becomes empty and the currently displayed content cannot be obtained.

This kind of keyboard is difficult to handle. It is difficult to intercept and filter input in Keydown input and other events. Especially after switching to the Jiugongge keyboard, it can’t be handled.

Expected results

We want a keyboard like this:
Digital keyboard with decimal point under IOS

This keyboard has been seen inside many apps and in some component libraries. IOS native is easy to implement this digital keyboard, which is troublesome in H5.

The solution is as follows:

This is a Vue Code:

< input V-model = "purchasemoney" type = "text" inputmode = "decimal" MaxLength = "12" placeholder = "not less than 0.01 yuan" @ input = "oninputamount ($event)" @ blue = "oninplur ($event)" >

Using the inputmode attribute, please refer to: https://developer.mozilla.org…

OK, now the keyboard is a numeric keyboard with a decimal point. Under IOS, Safari, wechat, etc. have probably looked at it. At present, they are all OK.

The keyboard comes out, and then you need to write some logic to deal with some illegal situations: preventing copying and pasting in special characters, shielding expressions, coexistence of multiple decimal points, multiple zeros at the beginning, replacing the first zero as a new number, controlling the decimal to 2 digits, etc.

onInputAmount() {
  let temp = this.purchaseMoney;
  if (temp) {
    temp = temp.replace(/[^0-9.]/g, '');

    //There are multiple points in the string. Only the first one is retained and the others are filtered out
    if (temp && temp.length && temp.indexOf('.') != temp.lastIndexOf('.')) {
      var arr = temp.split('.');
      let first = arr.shift();
      temp = first + '.' + arr.join('');
    }
    //If the decimal part is truncated up to 2 digits
    if (temp.indexOf('.') != -1) {
      let intergerPart = temp.split('.')[0];
      let decimalPart = temp.split('.')[1];
      if (decimalPart.length > 2) {
        decimalPart = decimalPart.substring(0, 2);
      }
      temp = intergerPart + '.' + decimalPart;
    }

    //Remove excess 0 from the head
    while (/^0[0-9]/.test(temp)) {
      temp = temp.substring(1);
    }
  }
  this.purchaseMoney = temp;
},

So far, the main functions have been basically met, and the problems will be updated in the future.

When using vant components, you can see that the field component also uses the inputmode scheme. There are special instructions on the official website.

Recommended Today

SQL exercise 20 – Modeling & Reporting

This blog is used to review and sort out the common topic modeling architecture, analysis oriented architecture and integration topic reports in data warehouse. I have uploaded these reports to GitHub. If you are interested, you can have a lookAddress:https://github.com/nino-laiqiu/TiTanI recorded a relatively complete development process in my hexo blog deployed on GitHub. You can […]