网站首页 > 技术文章 正文
一、 html5 input中的数字number类型,
只能输入整数,如果要输入浮点数呢,可以通过max、min和step去定义。
type="number" 数字类型
min="0" 最小值
min="100" 最大值
step="1" 点击右边上下按钮每次增加或减少的值
1.默认整数
<input type="number" min="0" max="100" />
2.浮点类型
在属性值后增加小数位数定义浮点类型数据的输入
<input type="number" min="0.00" max="100.00" step="0.01" />
如图,整数框和浮点数框:
二、解决 html5 input type='number' 类型可以输入e
当给 input 设置类型为 number 时,比如,我想限制,只能输入 0-9 的正整数,正则表达式如下:
/^[0-9]?$/ // 匹配 0-9 的整数且只匹配 0 次或 1 次
用正则测试,小数点是无法通过的,且,因为 设置了类型为 number,也无法输入字母,
但实际上,1. 类似这样的不合规则的数字是可以通过验证的,且,可以键入字母 e,因为 e 在数学上代表2.71828,也是一个数字。
解决办法如下:
<input type='number' οnkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' />
这样,就不能输入 e 或者 小数点了
猜你喜欢
- 2024-11-17 fastapi+vue3文件上传(vue ftp上传)
- 2024-11-17 从零开始构建PDF阅读器(最简单的pdf阅读器)
- 2024-11-17 Dooring可视化之从零实现动态表单设计器
- 2024-11-17 在 FastAPI 中处理表单和用户输入:综合指南
- 2024-11-17 Laravel9表单的验证(validate表单验证)
- 2024-11-17 第63节 Form表单-Web前端开发之JavaScript-王唯
- 2024-11-17 Gateway结合Sentinel1.8限流熔断及自定义异常
- 2024-11-17 手机网站常见问题总结(手机网站出现错误怎么办)
- 2024-11-17 CSS实现去除Input框默认样式的详细教程
- 2024-11-17 企业必备实战之Sentinel规则Nacos持久化
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-