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 ...
随机推荐
- Java基础(十)
复习 静态方法与成员方法 //另一个类里的静态和成员方法 public class MyClass { //静态方法 public static void method2() { System.out ...
- hdfs基本文件操作
编程实现下列要求: 1.创建一个自己姓名首字母的文件夹 2.在文件夹下创建一个hdfstext1.txt文件,项文件内输入“班级学号姓名HDFS课堂测试”的文字内容: 3.在文件夹下在创建一个好的fs ...
- 小记---------spark优化之更优分配资源
spark优化:在一定范围之内,增加资源与性能的提升是成正比的. 因此, 一个cpu core 执行一个task线程. task数: 若有 cpu core 2个.num-execu ...
- 分层最短路（牛客第四场）-- free
题意: 给你边权,起点和终点,有k次机会把某条路变为0,问你最短路是多长. 思路: 分层最短路模板题.题目有点坑(卡掉了SPFA,只能用dijkstra跑的算法). #include<iostr ...
- QThread::wait()，一直以来我以为它阻塞的是QThread对象，可是我现在明白，原来阻塞的是这个对象所在的线程（通常是主线程）——所有事情源于 QThread 的事件循环——如果使用继承QThread这一方法，QThread::quit()没有效果，因为这个线程根本就不需要事件循环
近日,使用QThread,一些问题百思不得其解,看过大牛的文章,恍然大悟啊. 原文 http://hi.baidu.com/dbzhang800/item/c14c97dd15318d17e1f46f ...
- Chromium浏览器启动参数
序号 参数 说明1 --allow-outdated-plugins 不停用过期的插件.2 --allow-running-insecure-content 默认情况下,https 页面不允许从 ht ...
- windows10升级更新1709版本 在桌面和文件夹中点击右键刷新，会引起卡顿反应慢
win10,升级更新,1709,右键,卡机,刷新,反应慢,桌面,文件夹 windows自动升级到1709版本后出现的问题,而之前是没有这种问题的. 最终解决办法:(需要设置注册表) 运行:快捷键Win ...
- 关于redis的几件小事(九)redis的并发竞争问题
1.什么是并发竞争 就是多客户端同时并发写一个key,可能本来应该先到的数据后到了,导致数据版本错了.或者是多客户端同时获取一个key,修改值之后再写回去,只要顺序错了,数据就错了. 2.怎么解决 采 ...
- JVM--对象访问和OutOfMemoryError异常
对象访问: 使用句柄访问方式: 使用直接指针访问方式: OutOfMemoryError异常: 设置堆的最小最大容量:-Xms20m -Xmx20m 设置一样推不可自动扩展. 设置出现内存溢出 ...
- 记一次生产环境presto删表失败的问题
场景,开发用java程序连接presto创建一个表,这个表在hdfs的权限为: 然后用presto去删除这个表 报错,没有权限删除,查看上一级目录权限,发现权限正常 直连hive删表 发现正常. 然后 ...