angularJS限制 input-text 只能输入数字
最初的目的是为了让输入的字段仅为数字,不要包含英文,理所当然想到了正则表达,比起对每一个字符判断ASCII码要方便的多
JS正则表达式的使用,可以参考正则表达式
以match为例,全局匹配非数字
var reg = /\D/g;
var str = "abc12def";
var result = str.match(reg); //['abc','def']
结果会以数组的形式展示,因此不难发现,若数组长度为0,则全为数字。
但是,以怎样的形式表达“输入的字符全是数字”比较稳妥?
各有说法,有人认为通过字符过滤,当用户输入非数字时,字符会显示一瞬间然后因为不符合过滤要求被删除。
参考了张志成在知乎上的回答,一种只保留数字的简单写法。
<input type="text" id="text" ng-model="item.attr" ng-keyup="clearNum(item,'attr')">
var app = angular.module("myApp",[]);
app.controller("myCtrl", function ($scope) {
$scope.clearNum = function(obj, attr){
obj[attr] = obj[attr].replace(/\D/g,"");
}
});
但是这样的效果用户体验很糟糕。
未完待续。。。。明天更!
angularJS限制 input-text 只能输入数字的更多相关文章
- input text 只能输入数字 js 正则表达式
$("#txt1").keyup(function () { $(this).val($(this).val().replace(/[^0-9.]/g, '')); }).bind ...
- input text 只能输入数字
添加 onkeyup="value=value.replace(/[^\d]/g,'')"
- html input验证只能输入数字,不能输入其他
html input验证只能输入数字,不能输入其他 此方法为借鉴别人的,在此只做记录. <input type="text" onkeyup="if(!/^\d+$ ...
- input输入框只能输入数字和 小数点后两位
//input输入框只能输入数字和 小数点后两位 function num(obj,val){ obj.value = obj.value.replace(/[^\d.]/g,"" ...
- Html限制input输入框只能输入数字
限制输入框只能输入数字, onafterpaste防止用户从其它地方copy内容粘贴到输入框: <input type="text" onkeyup="this.v ...
- input 输入框 只能输入数字、字母、汉字等
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...
- 使用正则限制input框只能输入数字/英文/中文等等
常用HTML正则表达式 1.只能输入数字和英文的: 复制代码代码如下: <input onkeyup="value=value.replace(/[/W]/g,'') " o ...
- input输入框 只能输入数字 oninput = "value=value.replace(/[^\d]/g,'')" input输入框输入大于0的数字 oninput="value=value.replace(/\D|^0/g,'')"
项目中因为利用 element-ui 和avue两个ui框架搭建的 1.利用element-ui自带的校验需要注意点 prop :rules ref这三个属性 2.利用oninput时间进行校验 ...
- javascript判断input框只能输入数字的方法
javascript 只允许输入数字有很多方法,总结如下 1,只允许输入数字和小数点. <input onKeypress="return (/[\d.]/.test(String.f ...
- js控制input框只能输入数字和一位小数点和小数点后面两位小数
<script language="JavaScript" type="text/javascript"> function clearNoNum( ...
随机推荐
- 连接云服务器中MySql数据库遇到的问题
使用的免费的云服务器,上面只能下载MySql数据库,不过当云数据库使用绰绰有余了,也就放一些测试数据而已 而且上面只可以部署php项目,.netcore项目部署实现比较麻烦 问题如下: 下载了navi ...
- C#解决界面闪烁
添加缓冲: private void SetDoubleBuffer() { base.SetStyle( ControlStyles.OptimizedDoubleBuffer | ControlS ...
- O058、Snapshot Volume 操作
参考https://www.cnblogs.com/CloudMan6/p/5657744.html Snapshot 可以为 volume 创建快照,快照中保存了 volume当前的状态,以后可 ...
- oracle数据库锁的问题
查询当前数据库被锁的对象 select b.owner,b.object_name,a.SESSION_ID,a.LOCKED_MODE from v$locked_object a dba_obje ...
- 在Markdown中写公式块
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. Markdown中的公式语法是遵循LaTex语法的 $ sum = \sum_{i ...
- 微信小程序下拉刷新
<config> { enablePullDownRefresh: true, navigationBarTitleText: "消息中心", } </confi ...
- ActiveMQ入门操作示例
1. Queue 1.1 Producer 生产者:生产消息,发送端. 把jar包添加到工程中. 第一步:创建ConnectionFactory对象,需要指定服务端ip及端口号. 第二步:使用Conn ...
- 第十章、time模块
目录 第十章.模块 第十章.模块 time模块 import time 时间戳 表示:是从1970年1月1日00:00:00开始按秒计算的偏移量. time_stamp = time.time() p ...
- 第十五章·Kibana深入-Dev Tools及Lucene语法
Dev Tools介绍 Dev Tools 页面包含开发工具,您可以使用这些Dev Tools与Kibana中的数据进行交互. 原先的交互式控制台Sense,使用户方便的通过浏览器直接与Elastic ...
- urllib.parse:很底层,但是是一个处理url路径的好模块
介绍 urllib.parse是为urllib包下面的一个模块,urllib的其它模块完全可以使用requests替代.但是urlli.parse我们是有必要了解的,因为该模块下面有很多操作url路径 ...