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( ...
随机推荐
- 向量运算(lua,三维) 点乘、叉乘、模、夹角
向量运算在游戏制作中经常用到,稍微总结一下. 一.点乘 如图,假设 向量a与b的点乘表示a在b上的投影与b的模的乘积 公式: 代码: function MathHelper.GetVector3D ...
- C Looooops
看了半天的同余 扩展欧几里得 练练手 C Looooops Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 27079 A ...
- 移动端真机debug调试神器 vConsole学习(一)之基础
参考 使用方法 移动端真机debug调试神器 vConsole的引入说明(原生态与WebPack) 移动端使用vconsole调试console vConsole ——开源的前端 console 调试 ...
- bizcharts在火狐上的Invalid date报错
bizcharts在火狐上的Invalid date报错,是因为 bizcharts 所用到的 fecha在 火狐上 只能接收日期对象类型的日期,不能接收日期字符串.
- 保证在浏览器上word/图片/Excel的下载的表现形式一样
function downloadImage(src) { console.log(src); //src="http://192.168.12.50:8181/file/common/pn ...
- C# 中 ContextMenuStrip 和 ContextMenu区别
简单来说,就是版本不同,只不过是升级后建议功能更加强大的ContextMenuStrip罢了,升级后的元件功能更强 . ContextMenu是VS2005里的,而ContextMenuStrip是V ...
- JavaMaven【六、生命周期】
Maven有三个独立的生命周期,每个生命周期都不会出发别的生命周期的操作 若直接执行生命周期后面的操作,maven会默认执行前面的操作 如项目创建好后,直接执行mvn install,会默认依次执行c ...
- beego注解路由不刷新(不生效)
本文主要说明本人在使用beego的注解路由时不生效问题 背景: 1.按照官网进行注解路由配置,第一次设置路由,完全正确,注解路由可用. 2.修改路由注释后,发现swagger页面并未有对应的更新 3. ...
- Kernel boot options
There are three ways to pass options to the kernel and thus control its behavior: When building the ...
- 基于Linux解决登录ssh客户端失败问题—sshd error: could not load host key
当你ssh远程登录时,会发现ssh登录界面刚打开就会闪退,在查看主机日志消息中,就会看到如下错误: 然而问题的根源也就是这三个文件,无法正常加载ssh主机密钥. 而我们只需要将有问题的文件删除,然后重 ...