jQuery+正则+文本框只能输入数字的实现方法
更新时间：2016年10月07日 11:37:14 投稿：jingxian
下面小编就为大家带来一篇jQuery+正则+文本框只能输入数字的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
网站中的一个小功能：要求用户只能输入16位数字。
试过javascript的方法：
如：一种方法：
//只允许输入数字
function checkkey2(value, e) {
var key = window.event ? e.keyCode : e.which;
if ((key > 95 && key < 106) || (key > 47 && key < 60)) {
}
else if (key != 8) {
if (window.event) //IE
{
e.returnValue = false;
}
else //Firefox
{
e.preventDefault();
}
};
};
另一种方法：
用正则表达式限制只能输入数字：
onkeyup="value=value.replace(/[^/d] /g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))"
上面的两种方法我均用过，但多少都会出现一些问题，比如浏览器的兼容性问题，不能达到想要的效果等，所以，最后还是考虑用正则来自己写。
直接贴代码了，很简单的正则表达式：
<head>
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />
<title></title>
<!-- http://www.cnblogs.com/babycool -->
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#xxxxxx").keyup(function () {
//如果输入非数字，则替换为''，如果输入数字，则在每4位之后添加一个空格分隔
this.value = this.value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
})
});
</script>
</head>
<body>
限制只能输入19个字符
<input id="xxxxxx" type="text" name="name" value="" maxlength="19" />
<br />
<br />
输入非数字替换为''
<input type="text" name="name" value="" onkeyup="value=value.replace(/[^\d]/g,'')" />
<br />
<br />
</body>
页面效果：
浏览器的兼容性：
我在IE7.8.9.10下，firefox，chrome下测试均可以。
以上就是小编为大家带来的jQuery+正则+文本框只能输入数字的实现方法全部内容了，希望大家多多支持脚本之家~
您可能感兴趣的文章:
- jQuery正则表达式的使用方法步骤详解
- jQuery如何用正则表达式验证手机号、身份证号、中文名称
- jquery正则表达式验证（手机号、身份证号、中文名称）
- jquery使用正则表达式验证email地址的方法
- Jquery Validate 正则表达式实用验证代码大全
- js jquery验证银行卡号信息正则学习
- jQuery中校验时间格式的正则表达式小结
- jquery里的正则表达式说明
- jquery 取字符串中数字的正则
- JavaScript正则表达式替换字符串中图片地址(img src)的方法
- js使用Replace结合正则替换重复出现的字符串功能示例
- jQuery使用正则表达式替换dom元素标签用法示例
- jquery 正整数数字校验正则表达式
相关文章
这篇文章主要介绍了jQuery表格插件ParamQuery简单使用方法示例,大家参考使用吧2013-12-12
dom操作主要包括append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。其核心处理函数是domManip，本文给大家介绍Jquery-1.9.1源码分析系列（十一）之DOM操作，感兴趣的朋友一起学习吧2015-11-11
本文给大家分享的是个人在使用jQuery的过程中总结的5点比较重要的知识点，这里推荐给小伙伴们，有需要的童鞋可以参考下。2015-05-05
我们经常需要在前台页面输入关键词进行数据的搜索这已经成为了一种习惯今天给大家分享一下如何使用 jQuery，MySQL和Ajax创建简单和有吸引力的Ajax搜索,感兴趣的你可不要错过了哈2013-02-02
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
鼠标移动上去，元素的left增加N像素，鼠标移开会慢慢的移动到原来的位置2010-03-03
这篇文章主要介绍了jQuery实现二级下拉菜单效果的相关资料,需要的朋友可以参考下2016-01-01
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象；2009-04-04
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
jQuery 练习 获取对象(3) - 根据属性、内容匹配, 还有表单元素匹配2010-05-05
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
在ajax中经常需要对元素的位置进行精确的定位，此时不仅需要获取元素自身的大小位置等属性。还需要知道页面、浏览器、滚动条等的长度和宽度。2010-01-01
这篇文章主要介绍了jQuery移动web开发的响应式布局设计,jQuery是JavaScript世界中最具人气的模块或者说类库,需要的朋友可以参考下2015-12-12
最新评论