首页 > 其他分享 >如何在HTML中限制input 输入框只能输入纯数字

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

时间:2023-04-28 16:47:05浏览次数:34  
标签:数字 value replace 输入框 HTML input 输入

限制 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>

转自 https://www.cnblogs.com/79524795-Tian/p/17034146.html

标签:数字,value,replace,输入框,HTML,input,输入
From: https://www.cnblogs.com/zhangrui100/p/17362573.html

相关文章

  • esp32 墨水屏 html 上位机程序 传图
    使用esp32开发墨水屏显示图片这里的墨水屏工具为我自己制作的,使用esp32c3和2.9寸墨水屏,你如果使用的是自己的,请更换墨水屏驱动代码,引脚定义和图片尺寸在之前的demo演示中,我展示了使用esp32c3配合墨水屏展示HelloWorld!的一个程序。有朋友问我,墨水屏可以展示图片......
  • 网页截图,html2canvas简单示例
     <divid="box"><p>asd4a5s6fa6s5f1asf</p><imgstyle="width:200px"src="xxxxxx.png"/><buttonstyle="width:100px;height:30px"onclick="prtsc()">pr......
  • 从零开始构建HTML 5 Web页面
    HTML5是时下Web开发领域炒得火热的一个术语,是的,很多人都看好它,也有很多业内知名公司开始正式使用HTML5重新构建自己的网站,如YouTube开始使用HTML5视频,Google已经弃用自家的Gears,开始全面拥抱HTML5实现离线解决方案,各大浏览器厂家也纷纷开始支持HTML5,连被人诟病的微软也声称要......
  • 认识HTML5的WebSocket
    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocketAPI。WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法,从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocketAPI:它可用于客户端、服务器......
  • cshtml和html的区别从语法和功能上来看
    https://www.lookxue.com/blog/o61302ve.htmlcshtml和html的区别:1.cshtml是一种混合式的文件,它将html、javascript和C#代码结合在一起,而html只是一种纯静态的文件;2.cshtml可以使用C#代码进行逻辑处理,而html不能;3.cshtml中可以使用Razor语法,而html中不能;4.cshtml可以使用@......
  • html表格相关属性
    <!DOCTYPEhtml><html>   <head>      <metacharset="UTF-8">      <title>表头标签</title>   </head>   <body>      <tablealign="center"border="1"cellpadding="0"......
  • HTML中script 标签中的那些属性
    在HTML中,<script>标签用于嵌入或引用JavaScript代码。在<script>标签中,有两个属性可以用来控制脚本的加载和执行方式:async和defer。当然这也是常见的一道面试题,async 和 defer的作用和区别。async和defer属性都可以用于异步加载脚本,从而避免了在加......
  • java 后台给前台传值,html:select,html:text等加载页面显示默认值的方法
    后台写request.setAttribute("dateCreated","黑色头发");前台接收:html:text<html:textproperty="dateCreated"value="${dateCreated}"/>html:select<html:selectproperty="accountsUser"va......
  • java js JavaScript 设置html:radio的默认选中, js也可以用el表达式
    <html:radioproperty="consumptionClass"value="花了">花了</html:radio><html:radioproperty="consumptionClass"value="赚了">赚了</html:radio><html:radioproperty="consumptionClass"va......
  • html超链接
    html超链接​外部链接腾讯 target打开窗口的方式默认的值_self当前窗口打开页面_blank新窗口打开页面 百度​<h4>内部链接</h4><ahref="第一次使用工具.html">工具介绍</a><h4>空链接</h4><ahref="#">公司地址</a><h4>下载链接地......