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

方法如下:

<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. [转]maven2中snapshot快照库和release发布库的区别和作用

    Post by 铁木箱子 in 技术杂谈 on 2010-08-03 17:17 [转载声明] 转载时必须标注:本文来源于铁木箱子的博客http://www.mzone.cc[原文地址] 原文永久地址 ...

  2. mysql5.5.30源码安装及主从搭建

    双机热备(实验环境) 主服务器:ip地址192.168.100.244,mysql版本5.5.30,源码安装 从服务器:ip地址192.168.100.245 一.源码安装mysql5.5 启动目录: ...

  3. spring+struts1

    概括及介绍: 集成原理:在Action 中获得BeanFactory,通过BeanFactory取得业务逻辑对象 本例采用:JDK1.8,tomcat7.0.9  技术点:spring与strut1集 ...

  4. 【BZOJ3651】网络通信 LCT

    [BZOJ3651]网络通信 Description 有一个由M 条电缆连接的 N 个站点组成的网络.为了防止垄断,由 C 个公司控制所有的电缆,规定任何公司不能控制连接同一个站点的两条以上的电缆(可 ...

  5. android菜鸟学习笔记20----Android数据存储(四))Android数据库操作

    Android内置了一个名为SQLite的关系型数据库,这是一款轻量型的数据库,操作十分简便.SQLite与别的数据库不同的是,它没有数据类型.可以保存任何类型的数据到你所想要保存的任何表的任何列中. ...

  6. READ_TEXT

    [转自http://lz357502668.blog.163.com/blog/static/1649674320109119101907/]这里,定义ITAB内表来存储长文本,并放到内表ITAB_E ...

  7. linux awk数组相关操作介绍

    用awk进行文本处理,少不了就是它的数组处理.那么awk数组有那些特点,一般常见运算又会怎么样呢.我们先看下以下的一些介绍,结合样例我们会解说下它的不同之处.在 awk 中数组叫做关联数组(assoc ...

  8. iOS UIImage 拉伸问题 (适用于UIButton等需要局部拉伸的情况)

    图片 有的切图切很大 还占用ipa大小,有时候 切图 只需要 局部或者说 一个压缩的图片的抽象状态 直接上代码 CGFloat top = ; // 顶端盖高度 ; // 底端盖高度 ; // 左端盖 ...

  9. 让你快速上手Runtime(转)

    前言 本篇主要介绍Runtime在开发中的一些使用场景,顺便讲解了下MJExtension的底层实现.如果喜欢我的文章,可以关注我微博:袁峥Seemygo,也可以来小码哥,了解下我们的iOS培训课程. ...

  10. Eclipse cdt mingw配置记录

    本人下载的是Eclipse C/C++ IDE for Neon.3,下载页面是:http://www.eclipse.org/cdt/downloads.php. 1. 运行eclipse后,在He ...