[youzan/vant]无法拦截输入“-”

2024-05-22 782 views
2

<van-field type="number"> 组件无法拦截-(减号)的输入; 且在输入减号时,input事件收到的数据是个空字符串,导致无法自行处理减号的输入。</van-field>

Screenshots image

Environment

  • Device: iPhoneXR
  • Browser: native webview
  • Vant Version: 1.4.7

Reproduce

  • 使用<van-field type="number" value="test" @input="handleInput">
  • handleInput中监听输入,当输入-号的时候,收到的数据为""

回答

2

image keypress 没法 prevent,考虑换 keydown 吧。

3

收到,我们先看下

7

目前的逻辑是允许减号输入的,因为 number 也包含了负数

7

但是在输入减号的时候,接收到的input事件里的值是"",这个会导致无法判断到底是删除还是因为输入减号导致的value为空""

9

input 事件里的值是浏览器返回的,所以我们也不太好处理。请问你需要实现什么样的需求呢

7

这个不算是一个bug 吧。因为原生 input 组件,当type=number的时候,input 本身就会阻止非数字的输入。先输入一个减号(-),e.target.value 本身就获取不到值,后续输入数字才能获得值,比如 -1,-123,这样。要实现你的效果,就不能用 type=number,或者有赞需要参照 ant的做法,单独建一个 van-input-number 组件,而不是依赖 type=number

9

input 事件里的值是浏览器返回的,所以我们也不太好处理。请问你需要实现什么样的需求呢

额,我这边的需求其实就是需要实现一个金额的输入框(0-9加小数点),但是vant并没有提供一个很好的解决方案,我是自己模拟输入框加虚拟数字键盘解决的。

4

原生 input 的问题确实比较难处理,我们暂时没计划提供 van-input-number 这样的组件,所以自行模拟输入框是一个比较合适的解决方法^_^

3

原生 input 的问题确实比较难处理,我们暂时没计划提供 van-input-number 这样的组件,所以自行模拟输入框是一个比较合适的解决方法^_^