纠结了一段时间都没找出方法,最后灵光一现想出这个方法,没想到测试下果然成功了! 
看目前网上几乎很难找到相对应的解决方法,所以这里分享出来,如果有更佳方法欢迎提出。

方法如下:

<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标签输入小数的方法的更多相关文章

  1. type为number的<input>标签 type和size属性失效

    html5中input的type属性增的可取值新增几种,对于不支持这几种新增值的浏览器会统一解析为text类型. Firefox.ie9不支持

  2. type类型为number的input标签可以输入字母e

    主要原因是:e在数学上代表的是无理数,是一个无限不循环的小数,其值约为2.7182818284,所以在输入e的时候,输入框会把e当成一个数字看待. 可以采用下面的方式来避免这个BUG,在input标签 ...

  3. 如何移除HTML5的type=""number""的input标签的上下箭头

    初次使用input的数字输入类型type="number"时会发现默认有个上下的箭头,如下图: 很明显这里不需要这个默认箭头,那么我们如何移出这个默认样式呢? 第一种方式,写css ...

  4. input标签实现小数点后两位保留小数

    短短一行代码就可以实现 <input type="number" min="0" max="100" step="0.01& ...

  5. 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题

    前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...

  6. 设置type为file的input标签选择图片类型

    设置能选择各种类型的图片如:png,jpg <input id="file" name="file" type="file" acce ...

  7. 修改input标签输入样式

    去掉input自带的边框: border-style:none;修改input输入的文字样式: input{ font-size: 24px; color:#5d6494; } 修改input框中占位 ...

  8. vue监听input标签的value值方法

    <input id="materialSearch" type="text" @keyup.enter="search" @input ...

  9. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

随机推荐

  1. Android 你可能忽略的提高敲代码效率的方式 (转)

    每日推荐 Eyepetizer-in-Kotlin:一款简约的小视频app,带你走进kotlin 作为学习kotlin的一款app,在撸代码的过程中学习kotlin的语法及特性. Eyepetizer ...

  2. Hadoop学习笔记(二)——zookeeper使用和分析

    分布式架构是中心化的设计.就是一个主控机连接多个处理节点,因此保证主控机高可用性十分关键.分布式锁是解决该问题的较好方案,多主控机抢一把锁.Zookeeper就是一套分布式锁管理系统,用于高可靠的维护 ...

  3. PHPstorm如何安装vue.js插件

    1.什么是PHPstorm? PhpStorm是一个轻量级且便捷的PHP IDE,其旨在提高用户效率,可深刻理解用户的编码,提供智能代码补全,快速导航以及即时错误检查.----来自百度百科 一句话:P ...

  4. fiddler 清除证书+重新添加证书

    1. 清除证书 ①任意浏览器,打开Internet属性弹窗,点击内容页签下<证书> ②删除个人页签下,颁发者为DO_NOT_TRUST_Fiddler**的数据 2. 重新认证证书 ①打开 ...

  5. J - Max Sum

    J - Max Sum Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Descrip ...

  6. CentOS7.1安装 Vsftpd FTP 服务器

    # yum install vsftpd 安装 Vsftpd FTP 编辑配置文件 ‘/etc/vsftpd/vsftpd.conf’ 用于保护 vsftpd. # vi /etc/vsftpd/vs ...

  7. JAVA NIO 简介 (netty源码死磕1.1)

    [基础篇]netty 源码死磕1.1:  JAVA NIO简介 1. JAVA NIO简介 Java 中 New I/O类库 是由 Java 1.4 引进的异步 IO.由于之前老的I/O类库是阻塞I/ ...

  8. Frobenius Norm

    http://mathworld.wolfram.com/FrobeniusNorm.html

  9. FlashFXP上传下载

    正常情况我们的生产环境我们本地是不能直接访问的,因为网段不通,且生产环境不允许我们随便访问,但是对于我们自运维的集群我们有时候需要上去做一些操作,通过堡垒机跳转到生产机器上即可,但是我们不能通过xsh ...

  10. [Java面试一]Spring总结以及在面试中的一些问题.(转发:http://www.cnblogs.com/wang-meng/p/5701982.html)

    1.谈谈你对spring IOC和DI的理解,它们有什么区别? IoC Inverse of Control 反转控制的概念,就是将原本在程序中手动创建UserService对象的控制权,交由Spri ...