jquery限定文本框只能输入数字(整数和小数)


Posted in Javascript onJanuary 08, 2016

本文实例介绍了jquery限定文本框只能输入数字的详细代码,分享给大家供大家参考,具体内容如下

先来一段规定文本框只能够输入数字包括小数的jQuery代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312"> 
<title>三水点靠木</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
//文本框只能输入数字(包括小数),并屏蔽输入法和粘贴 
jQuery.fn.number=function(){
 this.bind("keypress",function(e){ 
 var code=(e.keyCode?e.keyCode:e.which); //兼容火狐 IE 
 //火狐下不能使用退格键 
 if(!$.browser.msie&&(e.keyCode==0x8)){return;} 
 if(this.value.indexOf(".")==-1){return (code >= 48 && code<= 57)||(code==46);}
 else{return code >= 48 && code<= 57} 
 }); 
 this.bind("paste",function(){return false;}); 
 this.bind("keyup",function(){
 if(this.value.slice(0,1) == ".")
 { 
  this.value = ""; 
 } 
 }); 
 this.bind("blur",function(){ 
 if(this.value.slice(-1) == ".")
 { 
  this.value = this.value.slice(0,this.value.length-1); 
 } 
 }); 
}; 
$(function(){ 
 $("#txt").number();
}); 
</script>
</head>
<body>
<input type="text" id="txt" />
</body>
</html>

2、jQuery如何规定文本框只能输入整数:
有时候文本框的内容只能够是数字,并且还只能够是整数,例如年龄,你不能够填写20.8岁,下面就通过代码实例介绍一下如何实现此功能,希望给需要的朋友带来帮助,代码如下:

<html> 
<head> 
<meta charset="gb2312"> 
<title>蚂蚁部落</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
//文本框只能输入数字(不包括小数),并屏蔽输入法和粘贴 
jQuery.fn.integer=function(){ 
 this.bind("keypress",function(e){ 
 var code=(e.keyCode?e.keyCode:e.which); //兼容火狐 IE 
 //火狐下不能使用退格键 
 if(!$.browser.msie&&(e.keyCode==0x8))
 { 
  return ; 
 } 
 return code >= 48 && code<= 57; 
 }); 
 this.bind("paste",function(){ 
 return false; 
 }); 
 this.bind("keyup",function(){ 
 if(/(^0+)/.test(this.value)) 
 { 
 this.value = this.value.replace(/^0*/,''); 
 } 
 }); 
}; 
$(function(){ 
 $("#txt").integer();
}); 
</script>
</head>
<body>
<input type="text" id="txt" />
</body>
</html>

以上代码实现了我们的要求,文本框中只能够输入整数。

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 #Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 #Javascript
javascript中select下拉框的用法总结
Jan 07 #Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 #Javascript
js创建对象的方法汇总
Jan 07 #Javascript
JavaScript截取、切割字符串的技巧
Jan 07 #Javascript
js确认框confirm()用法实例详解
Jan 07 #Javascript
You might like
关于手调机和数调机的选择
2021/03/02 无线电
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
setTimeout学习小结
2017/02/08 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
python操作gmail实例
2015/01/14 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
python实现自动更换ip的方法
2015/05/05 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
Python中交换两个元素的实现方法
2018/06/29 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
python中pivot()函数基础知识点
2021/01/03 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
医学院学生求职简历的自我评价
2013/10/24 职场文书
写好自荐信的要点
2013/11/06 职场文书
交通安全责任书范本
2014/07/24 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python