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 相关文章推荐
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
这段js代码得节约你多少时间
Dec 20 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 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
PHP中操作ini配置文件的方法
2013/04/25 PHP
php析构函数的简单使用说明
2015/08/24 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
php创建图像具体步骤
2017/03/13 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
React优化子组件render的使用
2019/05/12 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
vue实现文字加密功能
2019/09/27 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
详解pandas映射与数据转换
2021/01/22 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
美国羊皮公司:Overland
2018/01/15 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
数学系个人求职信范文
2014/01/30 职场文书
元旦晚会主持词
2014/03/24 职场文书
文体活动实施方案
2014/03/27 职场文书
村安全生产责任书
2014/08/25 职场文书
2014年实验室工作总结
2014/12/03 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers