vue.js - v-text-field怎么在输入的时候限制只能输入数字，而且除了数字以外输入其他字符都不显示在输入框里？
v-text-field怎么在输入的时候限制只能输入数字，而且除了数字以外输入其他字符都不显示在输入框里？
oninput="value=value.replace(/[^0-9.]/g,'')" ，用这个在本地可以实现，但是更到线上不得行
共有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
-
本文向大家介绍vue.js实现只能输入数字的输入框，包括了vue.js实现只能输入数字的输入框的使用技巧和注意事项，需要的朋友参考一下 在菜鸟教程里，看了vue.js的教程，看完后，练练手，就试着实现了只能输入数字的输入框。在之前的博客里，用jquery也实现了这样的功能，这里用vue.js来实现，把实现的过程记录下来 如果只是一个输入框，要实现就非常的简单了，输入框的内容和数据绑定，给数据加一个
-
本文向大家介绍iOS 键盘输入限制(只能输入字母,数字,禁止输入特殊符号)，包括了iOS 键盘输入限制(只能输入字母,数字,禁止输入特殊符号)的使用技巧和注意事项，需要的朋友参考一下 首先我们要设置一下键盘类型 textFiled.keyboardType = UIKeyboardTypeASCIICapable; (根据个人喜好设置键盘) 然后我们要设置textfield的代理<UITextF
-
问题内容： 我试图在下面的字段中限制输入为数字 它不适用于 它适用于以下代码，但同时更改了两个字段 需要更改用户正在输入的输入字段的值，而不是两者都更改 问题答案： 使用此处找到的指令：而不是ng-change函数。复制此处以方便参考：
-
问题内容： 我是这个C ++世界的新手，正在尝试为数字密码编写输入验证功能。这是我到目前为止所得到的： 对于不正确的值，它工作得很好，但在有效输入时不会中断循环。知道我在这里缺少什么吗？干杯！！ James Kanze脚本的ErroR： 新代码： 使用 和 验证作为字符串 感谢所有人（尤其是James Kanze）的帮助。这件事在这里很有效。 那里还有进一步改进的空间吗？干杯！！ 问题答案： 这看
-
可以输入数值。 用法 Your browser does not support the video tag. 案例：数字标签 功能：显示输入的数值
-
mui提供了数字输入框控件，可直接输入数字，也可以点击“+”、“-”按钮变换当前数值；默认numbox控件dom结构比较简单，如下： <div class="mui-numbox"> <!-- "-"按钮，点击可减小当前数值 --> <button class="mui-btn mui-numbox-btn-minus" type="button">-</button> <inp