input输入框如何只能输入非零开头的正整数
input输入框如何只能输入非零开头的正整数
********* 废话不多说,先来代码 *********
case1: 原生html + javascript
<body>
<!-- html代码 -->
<div id="box">请输入销量:
<input class="input_value" />
</div>
<!-- js脚本引入 -->
<script type="text/javascript">
// step1: 获取元素
var obj = document.querySelector("#box .input_value");
// step2: 添加事件
obj.oninput = function() {
var _this = this; // 为防止this指向改变
var reg = isNaN(_this.value); // 验证this.value是否为数字
if (reg) { // 如果this.value不为数字,则reg为true
_this.value = _this.value.replace(/[^1-9]*$/g, '')
}
if (_this.value === '0') { // 此步想“ 阻止 ”用户输入的首个数字为0
_this.value = _this.value.replace(/^[^1-9]/g, '')
}
}
</script>
</body>
case2: vue + element-ui
<template>
<el-input v-model="price" @input.native="number($event)" placeholder="请输入"></el-input>
<!-- 此处使用.native的原因:因为keyup是原生js提供的键盘事件,但是现在我使用的是element-ui框架,elementUi上面的input组件监听事件是没有这个事件的,所以我们需要加个vue事件的修饰符 .native,代表原生事件的意思。 -->
</template>
<script>
export default {
data() {
return {
price: ''
};
},
methods: {
number (e) {
var _value = e.target.value; // 获取到输入框的value值
const reg = isNaN(_value); // 判断拿到的value是否为数字
if (reg) { // 若为非数字键,则全部替换为空
e.target.value = _value.replace(/[^1-9]/g, '');
}
if (_value === '0') { // 若为0,则替换为空
e.target.value = _value.replace(/^[^1-9]/g, '')
}
}
}
}
</script>
经验分享:
大学毕业自学前端,刚入职场不到两个月。这两天手头上的项目有一个需求是:input输入框如何只能输入非零开头的正整数,在用户输入的过程中,如果输入的东西不满足条件的话,则不会同步显示在输入框内。
- 一开始,我考虑使用键盘事件onkeyup来完成我的需求,在用户释放键盘上的字符键的时候keyup事件被触发,就会捕捉到用户输入的东西,并用正则检测是否为非数字的东西。很xi显然,我的第一个ideal失败了,因为keyup是在字符键被释放的时候触发的,所以我的input输入框中间肯定会有我输入的不符合要求的东西。
<template>
<el-input v-model="price" @keyup.native = "value=value.replace(/[^\d]/g,'')" placeholder="请输入"></el-input>
</template>
- 接下来,我转向了onkeydown事件,因为keydown事件是在用户按下键盘上的任意键时触发,我的思路是,我只要我想要的键盘上的任意键起作用,其他的按键全部禁用就可以了。于是我找到了每一个键的keycode,只保留了我想要的按键,其他的全部禁用。经过几次测试,我发现只有在英文输入法状态下我的代码才奏效,在中文输入法状态下丝毫不起作用,此时我的思路发生了转变,我开始研究其他的事件。
<template>
<el-input v-model="price" @keydown.native = "number($event)" placeholder="请输入"></el-input>
</template>
<script>
export default {
data() {
return {
price: ''
};
},
methods: {
number (e) {
var keyCode = event.keyCode; // 获取到触发keydown事件的键盘任意键的keycode
if (keyCode >= 48 && keyCode <= 57) { // 如果keycode编码在数字键的范围内,就不禁用该按键
event.returnValue = true
} else if (keyCode >= 96 && keyCode <= 105) { // 如果keycode编码在数字键的范围内,就不禁用该按键
event.returnValue = true
} else if (keyCode === 8) { // keycode:8是按键Backspace的码
event.returnValue = true
} else { // 如果keycode编码不在数字键的范围内,就禁用该按键
event.returnValue = false
// event.preventDefault() // 此处event.returnValue = false等同于event.preventDefault()
}
}
}
}
</script>
- onChange事件:使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应。所以又被pass了。
<template>
<el-input v-model="price" @change.native = "value=value.replace(/[^\d]/g,'')" placeholder="请输入"></el-input>
</template>
- onFocus事件:使用 onfocus 事件,在获得焦点的那一刻,才会触发该事件,接着输入东西,并不能触发该事件,不能在输入时就做出响应。所以又被pass了。
- onInput事件:使用oninput事件,完美解决了以上种种问题。oninput可以实时监听到用户输入的东西,对于那些非数字的,就可以使用正则找到并且替换为空,那么不管在中文状态下,还是英文状态下,都生效。
相关事件总结
事件名称(Event Name) | 事件描述(Event Des) |
---|---|
keyup | 当用户释放键盘上的字符键时触发 |
keydown | 当用户按下键盘上的任意键时触发,如果按住不放的话,会重复触发此事件 |
keypress | 当用户按下键盘上的字符键时触发,如果按住不放的话,会重复触发此事件 |
change | 在内容改变(两次内容有可能还是相等的)且失去焦点时触发 |
focus | 在对象获得焦点时发生 |
input | 在用户输入时立即触发 |
- 字符键:能打出字符的就是字符键,如1,a,空格,回车,数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘
- 非字符键:打不出字的就不是字符键,如F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键
小小的天有大大的梦想