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 相关文章推荐
javascript Demo模态窗口
Dec 06 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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/01 无线电
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
Python3字符串学习教程
2015/08/20 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
用python做游戏的细节详解
2019/06/25 Python
python字符串Intern机制详解
2019/07/01 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Python输出指定字符串的方法
2020/02/06 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
社区党员先进事迹
2014/01/22 职场文书
冬季施工防火方案
2014/05/17 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书