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、{菜单键}、{开始键}和方向键
input输入框如何只能输入非零开头的正整数的更多相关文章
- input输入框中只能输入数字，非数字字符自动清除
前言:项目中有个缴纳保证金的功能,要是输入框只能输入数字,不能输入其他字符. ①HTML代码:<input class="input-box" type="text ...
- 前端限制input输入框（只能输入正整数）
<input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{th ...
- input输入框限制只能输入数字
js: function onlyNumber(event){ var keyCode = event.keyCode; if((keyCode<48&&keyC ...
- 控制input标签中只能输入数字以及小数点后两位
js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...
- input验证码框，输入非数字或非12位时，红框提示;每4位加一个空格
以下代码:input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格 //input验证码框,输入非数字或非12位时,红框提示;每3位加一个空格 $(".text"). ...
- input输入框只允许输入数字
/* input输入框只允许输入数字*/ <input type="text" onkeypress="keyPress()" > function ...
- vue开发中利用正则限制input框的输入（手机号、非0开头的正整数等）
我们在前端开发中经常会碰到类似手机号输入获取验证码的情况,通常情况下手机号的输入需要只能输入11位的整数数字.并且需要过滤掉一些明显不符合手机号格式的输入,那么我们就需要用户在输入的时候就控制可以输入 ...
- input框限制只能输入正整数，逻辑与和或运算
推荐下自己刚写的项目,请大家指正:童话之翼 有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数 代码如下: < ...
- html或者php中 input框限制只能输入正整数，逻辑与和或运算
有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数 代码如下: <input onkeyup="if ...
随机推荐
- HDU-5238 Calculator
题目描述 给定一个关于 \(x\) 的表达式,形如下例:\(×4+2^3+8×6\) 按如下方法计算:\((((x×4)+2)^3+8)×6\) 运算符只有 加号,乘号,幂运算三种,给定的式子中有 \ ...
- 面试题1-十进制数转化为十六进制数，不使用hex方法
问题: 给定一个整数,写一个算法将它转换为16进制,对于负数,可以使用two’s complement方法 def tohex(num): """十进制数转十六进制数&q ...
- python多进程，并获取每个进程的返回值
pool = multiprocessing.Pool(processes=10) row = [...] for row in rows: task_id = row[1] img_id = row ...
- 从0开始入门ssm-crm系统实战
喜欢就点个赞呗! GitHub项目ssm-learn-crm show me the code and take to me,做的出来更要说的明白 1.1 克隆 git clone https://g ...
- luogu P3620 [APIO/CTSC 2007]数据备份
luogu 首先如果一条线不是了连接的相邻两个位置一定不优,把它拆成若干连接相邻位置的线.所以现在问题是有\(n\)个物品,选\(k\)个,要求选的位置不能相邻,求最小总和 如果没有选的位置不能相邻这 ...
- ZeroMQ 三种模式python3实现
ZeroMQ是一个消息队列网络库,实现网络常用技术封装.在C/S中实现了三种模式,这段时间用python简单实现了一下,感觉python虽然灵活.但是数据处理不如C++自由灵活. Request-Re ...
- 使用CXF开发WebService程序的总结(七)：Spring+CXF+Mybatis+Mysql共同打造的服务端示例
通过该demo,可以 熟悉下 spring+cxf+maven+mybatis+mysql等常见后端技术整合 1. 在前面的 父工程 ws_parent 中 添加依赖 由于原来的项目是使用的cxf依赖 ...
- Chrome安装Axure插件axure-chrome-extension
用Chrome打开Axure发布的原型图打不开,提示需要安装axure-chrome-extension插件,如下图提示 下面记录一下安装过程,其实很简单,插件没必要从网上到处找,在你发布的路径下就有 ...
- 08Response
1.功能:设置响应消息 1. 设置响应行 1. 格式:HTTP/1.1 200 ok 2. 设置状态码:setStatus(int sc) 2. 设置响应头:setHeader(String name ...
- 标准C语言(8)
指针变量用来记录地址数据,指针变量的用途就是找到另外一个变量,没有记录有效地址的指针不能用来找到其它变量,声明指针变量时必须在变量名称前写*.如果一个指针变量记录了另外一个变量的地址就可以认为它们之间 ...