H5中 input输入框聚焦呼出九宫格数字键盘（但要能输入除数字外的其他内容）且能显示隐藏内容

分析所要实现的内容，实际有两点：

• 呼出九宫格数字键盘，但切换键盘也能输入其他内容
• 实现内容的显示隐藏，隐藏的话展示小黑点

首先呼出数字键盘：有三种方法。要求同时可以输入除了数字外的其他内容，方法2，3都可实现，优先使用第二种方式；

// 同时设置 type: number; partten: [0-9]*
<input type="number" partten="[0-9]*"/>

// type: tel
<input type="tel"/>

// inputmode="decimal"
<input inputmode="decimal" />

实现内容的显示隐藏，隐藏的话展示小黑点，安卓和ios要分别实现； 安卓上可以使用css属性text-security

.inputHide {
  text-security: disc;
  -webkit-text-security: disc;
}

.inputOpen {
  text-security: none;
  -webkit-text-security: none;
}

但是这个属性在ios设备上会出现类似这样的问题：等待输入内容隐藏成小黑点后再切换显示/隐藏，会发现只对部分内容生效，而不是输入的全部内容；

因此在ios和安卓设备上要分别实现，ios上采用的方法是设置属性 inputmode="decimal"，然后密码显示/隐藏 通过切换 type="tel" type="password"实现

// 区分安卓/ios设备
const u = navigator.userAgent;
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //安卓端
const isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios端

// 如果是安卓设备，使用上面的方法
// 如果是ios设备
    useEffect(() => {
      if (isIos) {
        document.getElementById(id)?.setAttribute('inputMode', 'decimal');
        document.getElementById(id)?.setAttribute('type', showPassword ? 'tel' : 'password');
      }
    }, [showPassword, id]);