AngularJS中type为number的输入框如何限制小数位数

最新推荐文章于 2023-05-06 15:42:27 发布
最新推荐文章于 2023-05-06 15:42:27 发布
阅读量2.4w 收藏
点赞数
分类专栏： 前端开发 文章标签： angularjs number step 保留小数 input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanjun008/article/details/42461939
版权

在做一个项目时，需要对输入框内容进行限制，只能输入两位小数。


首先要限制只能输入数字，这个很好实现，使用如下代码即可

<span style="font-size:14px;"> <input type="number"  ng-model="interest" name="interest" required /></span>


required :该输入框必填

type=number :只能输入整数


如何允许输入两位小数呢？

我们需要借助step属性（step是步长的意思）

  1. 目前而言，对step雄起的浏览器为IE10+, Chrome以及Opera浏览器。
如下一小段含step属性的HTML代码：
 

<span style="font-size:14px;"> <input type="number" step="0.01" ng-model="interest" name="interest" required /></span>

如何需要输入三个小数位，这step=0.001，依次类推


学无止境-yj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
angular限制input框输入金额（是小数的话只保留两位小数点）
lorena0928的博客
07-13 7839
需求 输入框要求输入金额，只能输入数字，可以是小数，必须保留小数点后两位。 js判断部分： checkInput: function (event) { var id = event.target.getAttribute(“id”);//获取input的id var reg = /^[-?\d]+(.)?(\d{1,2})?/;//匹配正则while
Angular限制input框输入金额（是小数的话只保留两位小数点）
01-19
输入框要求输入金额，只能输入数字，可以是小数，必须保留小数点后两位。 js判断部分： checkInput: function (event) { var id = event.target.getAttribute(“id”);//获取input的id var reg = /^[-?\d]+(.)?(\d{...
兼容火狐 数字输入框type[number]限制输入两位小数
沙漠面包的博客
12-17 2289
不啰嗦，上代码 HTML代码： @keyup，vue给input绑定onkeyup事件，其他语法请自行变通。 &lt;input type='number' step='0.01' @keyup='oninput'/&gt; &lt;!-- step 精度--&gt;  JS代码： 如果不加上  if return 这段代码，火狐浏览器会出现输入“.”就被正则干掉 oninput(...
angularJs控制input只能输入数字并且小数点后只能输入两位
I_LV_XJ的博客
05-24 7015
在使用angular开发webapp的时候有时候需要input只能输入数字，并且小数点只能是一个，小数点后只能输入两位小数； 在浏览器上我们可以使用onkeypress使用正则表达式来实现这样的需求，但是onkeypress在手机端是不管用的，使用 ng-keypress也是不行的（我使用的时候没有成功），这时候我们可以使用js来控制，实现这样的需求，代码如下：$("#withdraw").k
TS中保留小数点后几位并输出
Level_Gram的博客
05-06 877
console.log("num3.toFixed(6) 为 "+num3.toFixed(6)) // 输出：177.234000。console.log("num3.toFixed(2) 为 "+num3.toFixed(2)) // 输出：177.23。console.log("num3.toFixed() 为 "+num3.toFixed()) // 输出：177。
typescript（angular 2）中 对number类型的数据进行保留小数操作
ypy9323的博客
02-08 1万+
 ts数据的类型是一个any类型，它有一个number类型的属性，当我们对这个字段进行toFixed()操作时会有这样一个错误：core.js:1427 ERROR TypeError: this.actualViscosity.value.toFixed is not a function 解决办法很简单，借助 Number 类型就可以解决这个问题就像这样：this.inkTemperature...
解决 html5 input type='number' 类型可以输入点.
malin970824的博客
05-05 2511
设置只能输入整数时，input 为number类型 仍然可以输入小数点，设置以下属性，键盘小数点输入无效： <input type='number' onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' /> ...
JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数
12-13
input type = "text" name= "number" id = 'number' onkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数');this.value='';}" /> 如果不是整数就直接alert 第二： 限制是两位的小数 <input ...
element-ui表格列金额显示两位小数的方法
12-03
对于金额的显示，大多情况下需要保留两位小数，比如...toFixed() 方法可把 Number 四舍五入为指定小数位数的数字，使用语法如下： NumberObject.toFixed(num) 其中 num 为必需项，用于规定小数的位数，取值范围 [0, 2
Element InputNumber计数器的使用方法
10-15
`:precision` 属性用于设置数值的小数位数。结合 `:step` 属性，可以实现对小数部分的精确控制。 ```html <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number> export ...
vue 限制input只能输入正数的操作
11-19
在某些项目中 input 框只能输入数字，可以用以下办法： 先在标签上绑定上 @input 事件来监听标签的值变化，通过正则来改变输入的值。 <input class="keep_input" v-number-only style="width:35px" v-model...
angularjs过滤器(number)
lihaiming_2008的专栏
12-01 306
摘要 angularjs过滤器number，用来精确浮点数   目录[-] 在html中用法 在js中用法 参数 例子 用来精确浮点数，指定小数点位数. 在html中用法 ? 1 {{ number_expression | number : fractionSize}} 在js中用法 ...
input type="number" 保持小数点后面两位
WWF_HelloWorld
09-07 5039
其实下面的方法看起来也很low，但是查了很多资料，也没找到一个完美的方法。 <input type="number" class="number"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascrip...
AngularJS input number 保留两位小数
热门推荐
JavaEE_Linux
05-31 1万+
在网上查询了好多说用step="0.01" 不能够满足ng-model 绑定的值 后来找到了currency-format="number"     <!-- type="number" step="0.01"  --> 可以保留三位小数 也算可以满足需求
AngularJS  中设置 input[number] 的有效位
LittleUniverse
05-26 1526
参考连接 http://blog.csdn.net/yanjun008/article/details/42461939
angular，使用directive实现，将input的数字保留两位小数，不足两位补0.
程序猿成长之路
09-04 2447
https://www.oschina.net/code/snippet_929096_53265 angular.module('app').directive('numFormat',function() { return { scope:{ model : '=ngModel' }, link: functio
JavaScript-Number类型常用方法
weixin_51326081的博客
08-17 767
JavaScript-Number类型常用方法
nz-input-number 小数位数
最新发布
08-25
nz-input-number 控件的小数位数是两位。 使用 jQuery 的 keyup 事件监听器，可以实现输入框只能输入数字，并且小数点后只能输入两位小数的功能。<span class="em">1</span><span class="em">2</span><span class=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值