type为number的input标签输入小数的方法
纠结了一段时间都没找出方法,最后灵光一现想出这个方法,没想到测试下果然成功了!
看目前网上几乎很难找到相对应的解决方法,所以这里分享出来,如果有更佳方法欢迎提出。
方法如下:
<input type="number" step="0.01" />
在input标签中添加step属性,此例子中将step设为”0.01”,即可以输入含两位小数的数字。(仅输入含一位小数或整数也可)
可以自行修改step值来修改精确度。
关于Html5中<input type="number" name="points" min="1" max="10" />只能输入整数的问题
<input type="number" name="points" min="1" max="10" />
使用这句话时,输入框只能输入整数,要想输入小数,我们可以这样修改:
<input type="number" value="1" min="0.0" step="0.1">
例如上句,最小值为0,每一步步长为0.1,既可以输入0.1 0.2 0.3等等,没有最大值。则实现了既能输入整数,又能输入一位小数的输入框验证,如果多位小数,可以再把步长缩小,如0.01等等。
type为number的input标签输入小数的方法的更多相关文章
- type为number的<input>标签 type和size属性失效
html5中input的type属性增的可取值新增几种,对于不支持这几种新增值的浏览器会统一解析为text类型. Firefox.ie9不支持
- type类型为number的input标签可以输入字母e
主要原因是:e在数学上代表的是无理数,是一个无限不循环的小数,其值约为2.7182818284,所以在输入e的时候,输入框会把e当成一个数字看待. 可以采用下面的方式来避免这个BUG,在input标签 ...
- 如何移除HTML5的type=""number""的input标签的上下箭头
初次使用input的数字输入类型type="number"时会发现默认有个上下的箭头,如下图: 很明显这里不需要这个默认箭头,那么我们如何移出这个默认样式呢? 第一种方式,写css ...
- input标签实现小数点后两位保留小数
短短一行代码就可以实现 <input type="number" min="0" max="100" step="0.01& ...
- 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...
- 设置type为file的input标签选择图片类型
设置能选择各种类型的图片如:png,jpg <input id="file" name="file" type="file" acce ...
- 修改input标签输入样式
去掉input自带的边框: border-style:none;修改input输入的文字样式: input{ font-size: 24px; color:#5d6494; } 修改input框中占位 ...
- vue监听input标签的value值方法
<input id="materialSearch" type="text" @keyup.enter="search" @input ...
- html <input>标签类型属性type(file、text、radio、hidden等)详细介绍
html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...
随机推荐
- oracle10g安装问题
oracle10g的安装还是比较容易的,一直下一步就行了,但是今天安装的时候遇到了一个新问题,在安装的过程中提示提示一些 Configuration Assistant失败刚开始,我直接跳过去,但后面 ...
- 洛谷P1073 最优贸易==codevs1173 最优贸易
P1073 最优贸易 题目描述 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个 城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一 ...
- 【BZOJ4070】[Apio2015]雅加达的摩天楼 set+最短路
[BZOJ4070][Apio2015]雅加达的摩天楼 Description 印尼首都雅加达市有 N 座摩天楼,它们排列成一条直线,我们从左到右依次将它们编号为 0 到 N−1.除了这 N 座摩天楼 ...
- 【BZOJ2790】[Poi2012]Distance 筛素数+调和级数
[BZOJ2790][Poi2012]Distance Description 对于两个正整数a.b,这样定义函数d(a,b):每次操作可以选择一个质数p,将a变成a*p或a/p, 如果选择变成a/p ...
- Eight(经典题,八数码)
Eight Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- Collective Mindsets (easy)(逻辑题)
Collective Mindsets (easy) Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d &am ...
- 记录-spring MultipartFile 文件上传
注意:以下上传和下载方法未必完全正确,不同浏览器效果不同,建议不要使用IE /** * 简单的文件上传 * @author:qiuchen * @createTime:2012-6-19 * @par ...
- OOP中的逆变和协变
逆变和协变在存在于强类型语言中,尽管非常少提及.可是里面蕴含了面向对象的世界观.感谢和我一起讨论这个问题的人. 这里用了C#.Scala的语法作为演示样例.事实上逆变和协变的概念跟语言本身关系不大.事 ...
- 关于ionic开发中遇到的坑与总结
这次是第二次使用ionic开发混合app,今天算是对这个框架做一个总结,基础的我就不再重复了,网上都有教程.我就说说自己的心得和遇见的各种坑, 之后会陆续补充,想到什么说什么吧. 1.关于ionic效 ...
- Redis持久化——多实例部署(四)
Redis单线程架构导致无法充分利用CPU特性,通常的做法是在一台机器上部署多个实例. 当多个实例开启AOF重写后,彼此之间会产生对CPU和IO的竞争. 对于单机部署多Redis部署,如果同一时刻运作 ...