小程序对输入框输入值进行限制（输入框完全控制无法实现）

1. 需求

• 例如 数值输入只能输入两位小数

2. 问题

• 1）如果采用输入之后去通过正则之类的去替换掉输入的值然后再赋值给input，会出现一个变化过程，也就是说只要操作input值就存在该问题，并且光标会移动到最后，小程序原生可以控制光标位置（但是小程序方法返回字符串和直接设置值一样有一个值变化的过程），uni无法控制，不生效

  
  小程序input文档.png

3.结论

• 小程序端无法对input实现类似于react这种网页端的完全控制
  小程序端流程为：按下键盘 => 输入框值改变 => change事件中获取到输入值 => 代码层获取到输入值，决定是否要对输入值处理 => 赋值给input => input值从输入的值变化为代码处理过后的值

• 浏览器端执行流程为
  按下键盘 => onChange事件中获取到输入的值 => 代码层setCount决定input框要显示的值

// react 代码
function App() {
  let [count, setCount] = useState(0)
  return (
    <div className="App">
      <input value={count} onChange={(e) => {
        setCount(++count)
      }} />
    </div>
  )
}

• 以输入1.11,下一步按下键盘2 输入为1.112为例
  小程序端流程： input框目前值为1.11 =>按下键盘按键2 => 输入框变为1.112 => 代码处理输入值去除多余的2，赋值给input => 输入框的值由1.112 变为1.11
在这个过程中用户会看到闪一下，也就是从1.112变为1.11的过程
浏览器流程： input框目前值为1.11 => 按下键盘2 => 获取到输入值为1.112 => 代码处理去除多余2 赋值 => input框从1.11 变为1.11 表现为未改变

4.替代方案

• 1）由限制输入改为输入的时候不符合条件输入框下方出现警示信息
• 2）由限制输入改为失焦时操作输入框值，并显示toast提示，只能输入两位小数，参考京东小程序购物车输入单件购买数量超过200件
• 3）当输入的时候检测小数点后是否有两位小数，如果存在两位小数则直接设置当前输入框maxlength值为当前输入值长度（缺点：无法修改整数位，整数位只能进行删除操作，不能修改）
• 4）参考支付宝app提现，但是输入焦点不可移动删除，只能从最后一位往前删除
  具体实现为：页面需要一个隐藏的input通过一个动态focus属性来控制input的聚焦与失焦（uni与小程序原生均可做到），输入框自定义实现，光标也需要自定义实现，当点击输入框时输入框聚焦获取焦点拉起键盘，在输入框input事件中对值做处理然后赋值给自定义输入框组件
• 5）自定义键盘与输入框（不太现实，成本以及是否可行未知）