如何在HTML中限制input 输入框只能输入纯数字

最新推荐文章于 2024-06-07 17:42:25 发布
最新推荐文章于 2024-06-07 17:42:25 发布
阅读量10w+ 收藏 225
点赞数 98
分类专栏： 前端修行 文章标签： 正则 前端 前端开发 JavaScript HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w6990548/article/details/79388905
版权

限制 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、 小小小欣 两位小伙伴在评论区的反馈。

此去几何
关注
  • 98
    点赞
  • 踩
  • 225
    收藏
    觉得还不错? 一键收藏
  • 49
    评论
专栏目录
js限制input只能输入有效的数字(第一个不能是小数点)
12-11
第一种方法：通过字符搜索判断等实现，适合功能增强 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> [removed][removed] </head> <body> <input type="text" id="Score" /> [removed] $(document).ready(function() { //敲击按键时触发 $("#Score").bind("keypres
input限制
chuangmao7450的博客
06-30 326
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"&gt...
input只允许输入数字
最新发布
weixin_52597660的博客
06-07 253
【代码】input只允许输入数字。
html 输入框 只能输入数字 只能输入字母数字组合
weixin_33877885的博客
06-24 1130
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> 2.只能输入数字,能输小数点. <input onkeyup="i...
input框配置只能输入数字
m0_71130954的博客
03-20 679
input限制数字输入
input 设置只能输入纯数字
weixin_51828648的博客
04-06 993
完成后，输入框限制仅可输入数字，字母e和小数点均可输入（e为科学计数法）设置input 的type属性为number,在样式中设置如下代码。
input输入框中只允许输入数字
Nightliar的博客
03-15 1121
<input onkeyup="if(this.value.length==1){ this.value=this.value.replace(/[^1-9]/g,'') }else{ this.value=this.value.replace(/\D/g,'') }" onafterpaste="if(this.value.length==1
如何让 HTML 的 input 组件的输入只能是数字？
winfield821的博客
05-21 881
属性设置为 “number”，这将限制用户只能输入数字。
限制html文本框input只能输入数字和小数点
09-28
本文主要介绍了限制html文本框input只能输入数字和小数点的方法。具有很好的参考价值。下面跟着小编一起来看下吧
JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数
12-13
第一： 限制只能是整数 <input type = "text" name= "number" id = 'number' onkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数')...'只能输入数字，小数点后只能保留两位');this.v
使用正则限制input框只能输入数字/英文/中文等等
12-13
1.只能输入数字和英文的： 代码如下: <input onkeyup=”value=value.replace(/[/W]/g,”) ” onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^/d]/g,”))” ID...
Vue ElementUI实现:限制输入框只能输入正整数的问题
11-19
在Vue和ElementUI框架下，实现输入框(input)只能输入正整数的需求，可以通过多种方式来达成。这里介绍四种不同的方法： ### 方法一：利用禁止按键的方法 此方法通过监听`keyup`事件来阻止用户输入非正整数的字符。...
js限制输入框只能输入数字(onkeyup触发)
12-11
以上的缺点是，当你正确输入的是一串数字后，想用光标移动到前面修改其中的一个数字，发现移不动，所以就显示了下面的方法的好处 其实加个if更加和谐： $('input#box').keyup(function(){ var c=$(this); if(/[^\...
input输入框只能输入纯数字或小数点后几位
Xue_BT的博客
03-10 850
input的输入框限制输入内容为纯数字，不含任何符号(包括负号)。或者精确到小数点后几位数字
el-input只能输入整数，小数、最多保留两位小数、最多输入4位小数，过滤el-input输入框中的特殊符号
热门推荐
qq_46302247的博客
10-20 2万+
https://blog.csdn.net/weixin_40755688/article/details/95794638 <el-input v-model="demandFrom.expectedSalary" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" ></el-input> 元 onKeypress="return (/[\d]/.test(Str
html中使用文本框只能输入数字
sunshine
03-03 6580
1、直接在文本域中写入onkeypress="if (event.keyCode 57) event.returnValue = false;" 2、另外写函数          var str="0123456789";          function press()           {            var str1=document.all.fundsna
如何限制input输入框只能输入英文或者数字
04-28
可以使用正则表达式来限制输入框只能输入英文或数字。具体的实现方法如下： 1. 在input标签中设置onkeypress事件，当用户在输入框中按下键时触发。 2. 在事件处理函数中使用正则表达式来判断输入是否符合要求。 3. 如果输入不符合要求，则阻止默认事件的发生，即不允许输入。 下面是一个示例代码： ```html <input type="text" onkeypress="return /[a-zA-Z0-9]/.test(event.key)"> ``` 这个代码会限制输入框只能输入英文字母和数字，其他字符都不允许输入。其中，正则表达式`/[a-zA-Z0-9]/`表示匹配任意一个英文字母或数字。在事件处理函数中，`event.key`表示用户按下的键的字符，通过测试这个字符是否符合正则表达式来决定是否允许输入。如果符合正则表达式，则返回true，继续输入；否则返回false，阻止输入。
评论 49
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值