如何在HTML中限制input 输入框只能输入纯数字_此去几何的博客-程序员ITS304_js 只能输入数字

技术标签: 前端修行  前端开发  JavaScript  HTML5  前端  正则  

限制 input 输入框只能输入纯数字

1、onkeyup = "value=value.replace(/[^\d]/g,'')"

使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母

2、onchange = "value=value.replace(/[^\d]/g,'')"

使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应

3、oninput = "value=value.replace(/[^\d]/g,'')"

使用 oninput 事件,完美的解决了以上两种问题,测试暂时还没有出现其它问题。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>input</title>
</head>
<body>
    只能输入纯数字的输入框:<input type="text" name="" oninput="value=value.replace(/[^\d]/g,'')">
</body>
</html>

以上代码均已在谷歌、火狐、百度、UC、IE11、360急速、QQ、Edge浏览器下测试完毕,请放心使用,

感谢 qq_38726717小小小欣 两位小伙伴在评论区的反馈。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/w6990548/article/details/79388905

智能推荐

完全从零开始写的一个类似于OpenGL的软渲染器_洋葱_ywc的博客-程序员ITS304

  本人头铁从底层开始构建了一个类似于OpenGL的软渲染器,不借助任何图形库,只用C++和标准库。初衷是为了更加深入地了解当前三维渲染的整个流程,很多理论东西需要实践才能彻底地理解。这么几天关于搭建软渲染器的折腾让我收获不少。目前我实现的软渲染管线已经包含了一个传统固定管线的基本功能,借助一些工具统计得软渲染管线的核心代码(不包括空行、注释)共2838行。不再打算加入更多的功能特性如透明融合、阴...

swiper动态加载数据时,图片滑动滚动无效_TO_WebNow的博客-程序员ITS304

swiper 动态获取图片时,滚动滑动无效问题描述: 就是在动态获取图片后,把获取到的图片append到父级元素中时发现,没法滚动了.方案1:可以在添加父级元素后初始化swiper; 下面是我的代码片段res.data.forEach(swiper =&gt; { swiperDom = `&lt;div class="swiper-slide swiper-slide-center none-effect" data-swiperId="${swiper.id}"&gt;&lt;img sr

Swiper解决动态加载数据或自定义样式时滑动失效_军540的博客-程序员ITS304_swiper 动态加载

Swiper解决动态加载数据或自定义样式时滑动失效原因分析:swiper在初始化的时候会扫描swiper-wrapper内部swiper-slide的个数,从而完成初始化,但是由于动态加载是在初始化完成进行的操作,所以无法确定swiper-wrapper内部swiper-slide的个数,从而导致左右滑动失效解决方案:Swiper有这样两个参数:observer和observeParents,前者启动动态检查器,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化sw

Laravel路由设置_进击的递归的博客-程序员ITS304_laravel 路由配置

Laravel路由设置创建路由路由的作用是在用户访问指定页面时将页面URL匹配到被执行的控制器或匿名函数。默认情况下,所有的Laravel路由都定义在app/Http/routes.php。&lt;?phpuse App\Task;use Illuminate\Http\Request;/** * Display All Tasks */Route::get('/', function () { //});/** * Add A New Task */Route::

C/C++ 字符串比较——区分大小写和不区分大小写_n大橘为重n的博客-程序员ITS304_c不区分大小写对比字符串

一、区分大小写一般我们常用的字符串比较函数都是区分大小写的。我们这里只介绍strcmp函数,在windows和linux下函数名和用法都一样。原型:extern int strcmp(const void *s1, const void *s2);功能:用于比较两个字符串并根据比较结果返回整数。用法:基本形式为strcmp(str1,str2),若str1=str2,则返回零;若str...

solidworks装配体改为柔性_SOLIDWORKS 2020 装配体——柔性零部件_weixin_39521835的博客-程序员ITS304

这里是厦门智网科技有限公司,致力于为企业打造3D数字化研发管理平台。柔性零部件将零件零部件定义为柔性,以便通过装配体几何体来驱动柔性零部件的几何体。例如,可以在装配体上下文中对弹簧建模,其中弹簧长度由装配体中的外部参考驱动。 将弹簧插入另一个装配体中,其中弹簧显示有上下文之外的参考。 可以使用使零件成为柔性工具将上下文之外的参考重新映射到第二个装配体。 因此,弹簧由第二个装配体驱动,而不...

随便推点

echarts的学习_wd~的博客-程序员ITS304_echarts学习

echarts的学习一.echarts的安装二.创建图表三.线性图表实例四.柱状图表实例一.echarts的安装三种方式:(1)下载echarts.min.js,通过script引用(2)通过CDN的方式引用(3)npm install echarts -s二.创建图表步骤:(1)引入echarts.min.js(2)准备一个具备宽高的dom元素(3)设置配置信息具体步骤:a.获取dom元素b.初始化echarts实例c.设置配置信息d.显示图表// 基于准备好的dom,初始化

超级签名与企业签名有什么区别,开发者想要做签名分发需要注意什么?怎么防止入坑(当然入坑是必须的)_appmao的博客-程序员ITS304

痛苦的宝贝们分享一下分发过程做签名的注意事项!满满的都是智商在飞驰跑路!跑路!跑路!我跑你*呀你!为啥不能好好沟通呢?是早就想好了这样还是真的没有办法?那么肯定就是有办法不给解决!其实细细算一笔账单的话,长期的客户利润会远远大于跑路!目光短浅的鼠辈如此之多,咕噜分发的小编下面就给大家介绍一下如何避坑!随着苹果的上架审核越来越严,有许多的APP是根本无法通过苹果审核的,无法上架App Store,测试又没有办法真机测试我们该如何操作呢?又该如何解决?现今,已经有很多开发者在考虑用其他的渠道来对开发完成的应

js获取在线视频的第一帧画面的直链作为视频封面_adiynil的博客-程序员ITS304_js获取视频第一帧

最近碰到一个需求,要求获取在线视频文件的第一帧画面作为视频的封面图片,项目中使用的是 xgplayer 播放器,封面 poster 要求传封面的 url。思路:用 canvas 绘出画面 - 转成 base64 - base64 转成 File - 获取 File 的本地预览地址获取 base64 格式的封面这里 video 元素需添加 autoplay 属性,否则在一些浏览器上获取到的画面是黑的。还有就是先把 video 元素添加到 body 标签再移除,有时候会碰到视频在后台播放,用户根本没有可

iOS开发常用类库_iOS开发-上海的博客-程序员ITS304

总结这些优质开源库供快捷开发。框架类网络 AFNetworking 轻量级网络库。网络 图像 SDWebImage 支持缓存的异步图片加载库。图像 GPUImage 基于GPU的图像、视频处理库。Model Mantle 快速建立Model层的框架。Model MJExtension 字典模型互转框架。Model JSONKit 性能很好的JSON解析、生成框架。持久化 Magic

ORM思想解析_牛迁迁的博客-程序员ITS304_orm编程思想

ORM 对象关系映射(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换。从效果上说,它其实是创建了一个可在编程语言里使用的“虚拟对象数据库”。 —— [ 百度百科 ]广义上,ORM指的是面向对象的对象模型和关系型数据库的数据结构之间的相互转换。 狭义上

面试总遇到高并发、分布式的问题但是自己工作中不接触,自学又不深入,怎么办?_普通网友的博客-程序员ITS304

背景面试总会遇到一些关系高并发、分布式的问题,可是自己工作中不接触,自学又不深入,这可怎么办?分布式架构的知识太庞大了,小匠也是管中窥豹,结合自己的经验阐述一下自己的想法。结合我自己的一些面试经历,从分布式系统的构建体系说一下可能遇到的问题,涉及的技术和解决方案,这便是分布式系统的重点,也是面试的重点。现象我们从业务场景入手,用户越来越多,单个系统的内存、磁盘、CPU无法满足业务的需求的时候,需要把单机变成多机来解决问题,那么就需要引入分布式横向的扩充机器以增加吞吐量。针对不同的业务的需

推荐文章

热门文章

相关标签