基于监听事件和通过正则处理字符串实现
一、原生JS
<body>
<input type="text" id="number" placeholder="只能输入数字且最多两位小数">
<script>
//获取节点
let inp = document.getElementById('number');
//给节点添加键盘抬起事件
inp.onkeyup = function restrictNumber() {
let inpu = document.getElementById('number');
inpu.value = inpu.value.replace(/[^\d.]/g, ""); //仅保留数字和"."
inpu.value = inpu.value.replace(/\.{2,}/g, "."); //两个连续的"."仅保留第一个"."
inpu.value = inpu.value.replace(".", "$#*").replace(/\./g,'').replace('$#*','.');//去除其他"."
inpu.value = inpu.value.replace(/^(\d+)\.(\d\d).*$/, '$1.$2');;//限制只能输入两个小数
if (inpu.value.indexOf(".") < 0 && inpu.value != "") { //首位是0的话去掉
inpu.value = parseFloat(inpu.value);
}
}
</script>
</body>
二、基于vue
<template>
<input type="text" @keyup ="keyU" v-model="value">
</template>
<script>
export default {
data(){
value:'',
},
methods: {
keyU(){
this.value = this.value.replace(/[^\d.]/g, ""); //仅保留数字和"."
this.value = this.value.replace(/\.{2,}/g, "."); //两个连续的"."仅保留第一个"."
this.value = this.value.replace(".", "$#*").replace(/\./g,'').replace('$#*','.');//去除其他"."
this.value = this.value.replace(/^(\d+)\.(\d\d).*$/, '$1.$2');;//限制只能输入两个小数
if (this.value.indexOf(".") < 0 && this.value != "") { //首位是0的话去掉
this.value = parseFloat(this.value);
}
},
}
}
</script>
三、基于vue和element-ui
重点在于native修饰符,作用是监听组件根元素的原生事件
<template>
<el-input v-model="showData.proportion" @keyup.native="keyU" ></el-input>
</template>
<script>
export default {
data(){
value:'',
},
methods: {
keyU(){
this.value = this.value.replace(/[^\d.]/g, ""); //仅保留数字和"."
this.value = this.value.replace(/\.{2,}/g, "."); //两个连续的"."仅保留第一个"."
this.value = this.value.replace(".", "$#*").replace(/\./g,'').replace('$#*','.');//去除其他"."
this.value = this.value.replace(/^(\d+)\.(\d\d).*$/, '$1.$2');;//限制只能输入两个小数
if (this.value.indexOf(".") < 0 && this.value != "") { //首位是0的话去掉
this.value = parseFloat(this.value);
}
},
}
}
</script>
5434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
