限制input标签只能输入数字

最新推荐文章于 2024-07-03 11:46:28 发布

转载最新推荐文章于 2024-07-03 11:46:28 发布 · 905 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/liaohongwei/p/10996097.html

标签

#前端 #input #数字

收录于

前端专栏收录该内容

37 篇文章

订阅专栏

本文探讨了在HTML中限制输入框仅能输入数字的方法，对比了onkeyup、onchange和oninput事件的优劣。指出oninput事件能实时响应输入，避免非法字符，适用于中文输入法状态，提供了一个实用的代码示例。

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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

heyNewbie

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

input 标签输入限制只能输入数字(pc，移动端)，金额验证

qq_24790575的博客

04-25

1304

h5 input type=number 对于pc端及安卓手机可以限制住输入只能是数字，但是对与移动端ios手机来说不起作用。对于ios系统来说需要给input 添加属性pattern="[0-9]*"才能限制输入框只能输入数字。 ...

参与评论您还未登录，请先登录后发表或查看评论

input输入框限制只能输入数字的方法

qq_32450471的博客

02-28

1万+

input输入框限制只能输入数字的方法

设置input只能输入数字

热门推荐

L_yvpeng的博客

07-12

2万+

将标签中的属性直接设置为就可以达到只能输入数字。但是这个方式有一个缺点，它只能作用于网页端，在手机输入的话还是可以输入汉字或英文方法二还是一样在标签上设置，代码如下：该种可以在 input 框输入字母汉字但是会自动删除，最终只会留下数字。...

input文本框只能输入数字

龚清林的博客

08-19

7012

<input type="text" name="text" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />

input标签限制只能输入数字

baidu_24743861的博客

03-21

2万+

<input id="score" type="number" class="mui-input-clear" placeholder="请输入分值" oninput="value=value.replace(/[^\d]/g,'')">

input标签限制输入，只能为数字

qq_42310995的博客

11-01

1120

<input type="text" placeholder="请输入您的年龄" id="age" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.valu...

jQuery input 标签限制只能输入数字以及小数后面的两位小数

wujizhishui的博客

06-05

1224

<input type="text" onkeyup="num(this)" size="10"/> function num(obj){ obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符 obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字 ob...

102 input标签限制输入，只能为数字

phpstory的博客

07-27

813

<input class="hour" type="text" name="lname" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value...

el-input标签只能输入数字限制

正伯Pro的博客

05-08

233

【代码】el-input标签只能输入数字限制。

移动端 html只能输入3位,input 标签输入限制只能输入数字(pc，移动端)，金额验证...

weixin_39979215的博客

06-09

778

h5 input type=number 对于pc端及安卓手机可以限制住输入只能是数字，但是对与移动端ios手机来说不起作用。对于ios系统来说需要给input 添加属性pattern="[0-9]*"才能限制输入框只能输入数字。金额验证：checkFloatNumber (val){let reg = new RegExp(/^[0-9]+(.[0-9]{1,2})?$/);let length...

html 中 textarea,input 文本输入框限制输入内容

junxing2018_wu的博客

05-30

2405

经常碰到需要控制表单元素输入的类型，然后每次总是百度，然后复制粘贴，特别浪费时间。这里收集好方便直接使用。提供的方法非常简单使用直接嵌套在标签上使用，无需单独写js方法调用实现，只能输入数字(小数点也不能输入) <input type="text" name="input_text" onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu="value

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

weixin_30532759的博客

07-11

oninput="value=value.replace(/[^\d]/g,'')" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>input</title> </head&g...

js限制input输入

a754315344的博客

05-05

1474

1.取消按钮按下时的虚线框,在input里添加属性值 hideFocus 或者 HideFocus=true <input type="submit" value="提交" hidefocus="true" /> 2.只读文本框内容,在input里添加属性值 readonly <input type="text" readonly /> 3.防止退后清空的TEXT文档(...

限制输入时候只能是英文或数字

thaie的专栏

11-02

1281

限制输入时候只能是英文或数字

限制文本框中只能输入数字（非使用jq插件）

小猪奋斗

10-28

1091

在input标签中加入 onKeyPress=”if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;”

html 输入框只允许输入数字

weixin_30662109的博客

02-24

156

要想限制文本框只能输入数字，你可以用Html5的标签就可以解决：为input标签添加样式 type="number"即可。 // 限制输入框的数字输入范围 var strPri = document.getElementById("Pritxt").value; if(strPri < 1 || strPri > 999) { alert("优先级：请输...