当前位置:首页 > 问题 > HTML+JS使用正则表达式让input文本框只能输入整数

HTML+JS使用正则表达式让input文本框只能输入整数

在制作前台网页的时候我们总是想让文本框只能输入整数,效果就是我们输入非数字的字符时自动去掉非法字符。我喜欢使用jQuery,所以这里展示jQuery的做法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//只能输入整数
$('.int-num').each(function (e) {
	var obj = this;
	$(this).keyup(function (e) {
		var val=$(obj).val();
		if (val) {
			var pattern = /^-?\d+$/;
			if (!pattern.test(val)) {
				if(val.length == 1 && val=='-') {
					return;
				} else {
					var firstChar = val.substr(0, 1);
					obj.value = val.replace(/\D/g, '')
					if (firstChar == '-')
						obj.value = '-' + obj.value;
				}
			}
		}
	});
 
	$(this).blur(function (e) {
		var val = $(obj).val();
		var pattern = /^-?\d+$/;
		if (!pattern.test(val)) {
			$(this).val('');
		}
	});
});

html代码如下所示

1
<input type="text" class="int-num" />

所以只要输入的不是整数的字符都会被相应的正则表达式规则去掉。

  • << JavaScript的几个实用小知识点
  • 别人眼里的程序员 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/html-js-input-int/

    相关文章 近期热评 最新文章

    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。