一、实现思路

input只能输入纯数字的思路其实很简单,监听输入框值的变化,每次输入检索输入框的值,将非数字的字段替换成空,再将此值赋予给输入框。

关键代码:

\d:匹配数字

^/d:全文匹配非数字

replace(/[^/d]/g,''):全文匹配非数字,并替换成空。

那我们的实现代码为:

var input = document.querySelector("#demo");
input.oninput = function (){
input.value = input.value.replace(/[^\d]/g,'');
}

输入数字字母试试:

二、onchange  onkeyup与oninput的选择

其实说到input输入监听,更多想到的是onchange与onkeyup,而在上面实现中,使用的却是onkeyup,这里简单说说理由。

1.oninput:在用户输入时触发,与onchange不同之处在于 oninput 事件在元素值发生变化是立即触发。

2.onchange:在input值发生改变且输入框失去焦点时触发,所以在用户输入失去焦点前,非数字并不能被替换为空,视觉上存在一点缺陷。

亲自试试:

3.onkeyup:键盘弹起时触发,也存在一个问题,英文输入情况下,非数字会短暂存在后才会被替换,中文输入情况下,字母还是能输入,功能上存在一定缺陷。

亲自试试:

综上,还是推荐oninput达到最佳效果。

【JS】input输入框只能输入数字的更多相关文章

  1. input输入框只能输入数字和 小数点后两位

    //input输入框只能输入数字和 小数点后两位 function num(obj,val){ obj.value = obj.value.replace(/[^\d.]/g,"" ...

  2. js限制输入框只能输入数字

    分享下js限制输入框中只能输入数字的方法,包括整数与小数,分享几个例子,有需要的朋友参考下. 1.使用正则表达式限制输入框只能输入数字: <input type="text" ...

  3. JS实现输入框只能输入数字

    键盘下落事件实现输入框只能输入数字: <script type="text/javascript"> // 实现输入框只能输入数字 function ValidateN ...

  4. Html限制input输入框只能输入数字

    限制输入框只能输入数字, onafterpaste防止用户从其它地方copy内容粘贴到输入框: <input type="text" onkeyup="this.v ...

  5. input输入框 只能输入数字 oninput = "value=value.replace(/[^\d]/g,'')" input输入框输入大于0的数字 oninput="value=value.replace(/\D|^0/g,'')"

    项目中因为利用 element-ui 和avue两个ui框架搭建的 1.利用element-ui自带的校验需要注意点 prop  :rules ref这三个属性 2.利用oninput时间进行校验   ...

  6. input 输入框 只能输入数字、字母、汉字等

    1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...

  7. js实现input输入框只能输入数字的功能(完美测试通过)

    <input type="text" style="ime-mode:disabled;" onpaste="return false;&quo ...

  8. js实现input输入框只能输入数字的功能

    <input type="text" style="ime-mode:disabled;" onpaste="return false;&quo ...

  9. js 限制输入框只能输入数字的问题

    常规情况下,input设置为 type=‘number’  可以避免汉字,字符,字母,空格的输入,但是不能避免小减号 以及小键盘的减号-,加号+的输入, 可以考虑 监控 输入框的oninput事件,方 ...

随机推荐

  1. js-设置时间,获取几天后的时间

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. 100度享乐电商网 html

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  3. 1.虚拟机中安装ubuntu

    1.VMware安装很简单,全部默认安装即可. 2.安装完VMware之后,打开VMware,点击创建虚拟机 典型安装易出问题,所以这里选择自定义安装 安装过程选项配置如下 处理器数,核数,内存都可以 ...

  4. php+sqlserver之如何操作sqlserver数据库

    https://blog.csdn.net/xia13100004562/article/details/58598872 2016年12月19日 17:15:39 阅读数:6790 前面已经基本配置 ...

  5. 查看指定spid的脚本当前运行情况和状态

    USE MasterGO declare @spid int; select @spid = 419--null:all ; ;WITH DATA(spid,blockRelationship,blo ...

  6. mysql-5.7安装、配置

    1.进入到要存放安装包的位置 cd /home/lnmp 2.查看系统中是否已安装 MySQL 服务,以下提供两种方式: rpm -qa | grep mysql yum list installed ...

  7. SignalR 设计理念(一)

    SignalR 设计理念(一) 实现客户端和服务器端的实时通讯. 问题阐述 客户端提供的方法不确定! 客户端的方法参数不确定! 不同的名称和参数要分别调用指定的方法! 调用客户端方法时,忽略大小写! ...

  8. 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar

    [源码下载] 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) App ...

  9. urllib2 的使用与介绍

    爬虫简介  什么是爬虫? 爬虫:就是抓取网页数据的程序. HTTP和HTTPS HTTP协议(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收 HTML页面的 ...

  10. 通过修改EIP寄存器实现远程注入

    功能:通过修改EIP寄存器实现32位程序的DLL注入(如果是64位,记得自己对应修改汇编代码部分) 原理: 挂起目标进程,停止目标进程EIP的变换,在目标进程开启空间,然后把相关的指令机器码和数据拷贝 ...