vue.js - v-text-field怎么在输入的时候限制只能输入数字，而且除了数字以外输入其他字符都不显示在输入框里？

Question

v-text-field怎么在输入的时候限制只能输入数字，而且除了数字以外输入其他字符都不显示在输入框里？

oninput="value=value.replace(/[^0-9.]/g,'')" ，用这个在本地可以实现，但是更到线上不得行

Answer 1

使用 number 类型的 <v-text-field> 元素（会自动启用 .number 修饰符）。在移动端就会默认显示数字键盘了。但是如果用户手动又修改成了其他键盘再输入，那么仍然会显示非数字的内容，但是会在 input 失焦后自动置空输入的内容。

<v-text-field
  type="number"
  v-model="inputVal"
/>

---

你使用 .replace 的方式也行，但是会有一个非受控组件的问题。也就是说你输入非数字内容那么后输入的非数字内容仍然会显示在输入框中（即使绑定的 value 变量值中并没有后输入的非数字内容）。这个可能就是你说的本地可以但是移动端不行的现象？

改造成受控组件的编辑方式来实现？ �� Vuetify Playground Demo

<v-text-field
  :value="inputVal"
  @update:modelValue="val => inputVal = val.replace(/[^0-9.]/g, '')"
/>

---

说实话，我不太喜欢这种直接在用户输入内容的时候擅自把用户输入的内容替换的方式。更加推荐在用户输入错误内容的时候在下方提示用输入的内容有误。

<v-text-field
  v-model="inputVal"
  :rules="[val => !val || (/^\d+$/.test(val) || '只能输入数字')]"
/>

举一个非常容易出现问题的例子： 用户输入内容中的前后空格去除 这个需求。如果在用户输入过程中就替换掉用户的内容，那么用户就无法完成中间空格的输入需求。比如说在键入英文名的时候，就没办法完成输入 Evan You 这个文本内容，只能输入 EvanYou 之后在返回到中间插入空格。

---

另外，Vuetify 未来应该会有一个 <v-number-input> 的新组件推出 �� Number inputs — Vuetify