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( ...
随机推荐
- Git 学习笔记之(三)将本地工程导入到GitHub 仓库中
一:操作步骤第一步:建立git仓库 cd到你的本地项目根目录下,执行git命令,此命令会在当前目录下创建一个.git文件夹. git init 第二步:将项目的所有文件添加到仓库中 git add . ...
- java——ArrayList中contains()方法中的疑问
问题引子: ist<Student> students=new ArrayList<Student>(); students.add(new Student("201 ...
- c#连接Java后台,处理返回的数据
首先定义共通文件,根据url连接Java后台 class ConntectUtil { public JObject ConsoleApplication(string appID, CustomDa ...
- C#开发微信公众平台-就这么简单(转载)(附原文链接)
一直使用的是一百八的诺鸡鸭,没有想去接触看起来风风火火的移动互联网:但因工作需要维护一个微信公众订阅号,考虑以前有做网站的基础,就想着做个简单的微信后台管理:看了官方的开发文档,比狗哥地图的短许多,又 ...
- gflags 编译动态库
gflags 编译动态库 这里涉及到gflags的安装,原来使用 sudo apt-get install libgflags-dev 但是后面有人在环境中下载安装了libgflags的安装包,解压后 ...
- JS基础_运算符的优先级
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Sql Server 导出数据库表结构的SQL查询语句
--导出数据库所有表 SELECT 表名 Then D.name Else '' End, 表说明 Then isnull(F.value,'') Else '' End, 字段序号 = A.colo ...
- js多语言切换demo
网站为了国际化的需要,会使用到语言包,案例如下图. 这次尝试用js来打语言包,用到了插件 jquery.i18n.properties ,很明显,使用这个插件需要先加载jquery. 代码布局结构 ...
- vue中的常用三元
点击事件的三元 <el-button type="primary" @click="edit == 'mod' ? sureModify() : submit()& ...
- ETL 工具和 BI 工具
ETL是数据仓库中的非常重要的一环,是承前启后的必要的一步.ETL负责将分布的.异构数据源中的数据如关系数据.平面数据文件等抽取到临时中间层后进行清洗.转换.集成,最后加载到数据仓库或数据集市中,成为 ...