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

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

时间:2023-01-08 10:13:12浏览次数:37  
标签:数字 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>

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

标签:数字,value,replace,输入框,HTML,input,输入
From: https://www.cnblogs.com/79524795-Tian/p/17034146.html

相关文章

  • 2、如何把CSS应用到HTML
    link标签:作用是把其他文档与当前文档关联起来。 <!DOCTYPEhtml><htmllang="en"><head><linkrel="stylesheet"type=“text/css”href="../CSS/style1.css">......
  • bug|记录某次页面div使用v-html标签渲染图片等内容的过程
    前言记录某次页面div使用v-html标签渲染图片等内容的过程一、结论:get请求但被设置Sec-Fetch-*请求头的图片无法展示。二、原因:1.本项目中的img标签发起get请求,目标链......
  • HTML ,XHTML,HTML5简介,js,JSP与Servlet的关系理解
    ** HTML(HypertextMarkupLanguage)是文本标记语言,它是静态页面。是一种解释性语言,所谓解释性语言就是指可以在浏览器上显示出来,不需要编译工具的语言。**JSP(Javaserver......
  • HTML超文本标记语言1
    一、简介-HTML1.什么是HTML??首先,HTML是WWW的描述语言,由TimBerners-lee提出。HTML是用于描述网页的一种语言html是指超文本标记语言(HyperTextMarkupLanguage)ht......
  • c# 利用 webbrowser 解析 html
    using(varwb=newWebBrowser()){wb.ScriptErrorsSuppressed=true;wb.Navigate("about:blank");varstartTime=D......
  • Vue3单击新增添加新的input
     效果图: 代码:<template><div><inputtype="text"v-for="(item,i)ofitems"v-model="items[i]":key="i"@input="inp"><button@click="onAdd">......
  • HTML
    目录网页1.概念:2.形成:3.HTML:浏览器1.含义:2.内核:3.常用:Web标准(重点)1.原因:2.构成:3.优点:HTML的语法规范1.基本语法的概述:2.标签关系:3.基本结构标签:4.代码含义:标签语义1.标题标......
  • 大前端html学习05-表格和表单
    一、表格的作用及基本语法1、数据表格的作用及组成td></td></tr></table>注:一个tr表示一行;一个td表示一列(一个单元格)行分组<thead></thead>表头<tbody></tbody>......
  • 本人博客html + css + js 模板
    简介送给想设计主页的朋友一些思路 HTML<!DOCTYPEhtml><html><body><style>#nav{width:150px;height:400px;border:1pxsolid#D4CD49;position:fixe......
  • Java将OutputStream转为InputStream
    遇见的问题:做文件处理时,有两个工具类,一个是生成文件,需要一个OutputStream来写出,一个是上传文件,需要一个InputStream来读取类似代码://wordObj处理之后需要写出到一个输出......