vue实现输入框只允许输入数字
作者：小李的代码经销商
在vue项目中,输入框只允许输入数字,现将自己使用的一种方法记录,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
vue实现输入框只允许输入数字
在vue项目中，输入框只允许输入数字，现将自己使用的一种方法记录，以供参考！
1、行内插入 οninput="value=value.replace(/[^0-9.]/g,'')"
<el-input v-model.number="ruleForm.sort" placeholder="请输入数字(限数字)" oninput="value=value.replace(/[^0-9.]/g,'')" />
2、使用 element-ui 的 InputNumber 计数器
<el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
如果不需要控制按钮，设置controls为false即可
VUE html里的文本框只允许输入数字的两种方法
方法一、input 事件 + 数字正则表达式
<template>
<a-input v-model:value="num" @input="handInput" />
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "OnlyNum",
props: {},
emits: [],
setup() {
const num = ref("");
function handInput(e) {
num.value = e.target.value.replace(/[^0-9]/g, "");
}
return { num, handInput };
},
});
</script>
<style scoped></style>方法二、键盘按键事件 keydown
<template>
<a-input v-model:value="num" @keydown="handKeydown" />
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "OnlyNum",
props: {},
emits: [],
setup() {
const num = ref("");
function handKeydown(e) {
let _code = e.keyCode;
// 只允许数字键和删除键
if ((_code >= 48 && _code <= 57) || _code === 8) {
} else {
e.preventDefault();
}
}
return { num, handKeydown };
},
});
</script>
<style scoped></style>到此这篇关于vue实现输入框只允许输入数字的文章就介绍到这了,更多相关vue输入框只允许输入数字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！